<!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> </head> <body> <input type="hidden" name="user_id" value="1"> <form name="user-form" id="user-form" enctype="multipart/form-data"> <input type="file" name="image_file"> <input type="text" name="name"> <button type="button" title="Save" id="save-user">Save</button> </form> </body> </html>
JavaScript:
$("#save-user").on("click", function() {
var user_form = $(this).closest("#user-form");
var details = new FormData($(user_form)[0]);
// you can also append any custom paramter to form data, if not skip these
// details.append('user_id', $('body').find('[name="user_id"]').val());
$.ajax({
type: 'POST',
url: '/save-document',
data: details,
processData: false,
contentType: false,
success: function(data) {
console.log("user updated successfully");
},
error: function(e) {
console.log("error");
}
});
});
]]>
HTML (Add this code at the end of body):
<div id="fancybox" class="modal" style="display: none;"> <span class="fancybox-close">×</span> <img class="fancybox-content" id="fancybox-img"> <div id="fancybox-caption"></div> </div>
CSS:
/* Fancybox */
.fancyimg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.fancyimg:hover {opacity: 0.7;}
/* The Modal (background) */
#fancybox {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 20px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.fancybox-content {
margin: auto;
display: block;
width: 100%;
max-width: 900px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#fancybox-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 40px;
}
/* Add Animation - Zoom in the Modal */
.fancybox-content, #fancybox-caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.fancybox-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.fancybox-close:hover,
.fancybox-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.fancybox-content {
width: 100%;
}
}
/* FancyBox end */
JS:
$("img.fancyimg").on("click", function() {
var img_src = $(this).attr("data-big");
var img_src = img_src ? img_src : $(this).attr("src");
$("#fancybox").show();
$("#fancybox-img").attr("src", img_src);
$("#fancybox-caption").html($(this).attr("alt"));
});
$(".fancybox-close").on("click", function() {
$("#fancybox").hide();
});
Configuration, Just one 
- Add ‘class=”fancyimg”‘ to the img tag you wanna click and zoom
P.S.: You can also show large image by setting data attribute: data-big=”/big-img-path”
That’s it, you’re good to go with LightBox built with CSS & Javascript without using any plugins. Enjoy 
$("form").on("change", "input[type='file']", function() {
if ($(this).val()) {
read_image(this);
}
});
// render image files
function read_image(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).parent().find('img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
]]>
HTML
<body>
<a href="#" class="back-to-top">
<i class="fa fa-chevron-up"></i>
</a>
</body>
jQuery
$( document ).ready(function() {
// back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ($(window).scrollTop() > amountScrolled) {
$('a.back-to-top').fadeIn('slow');
}
else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('body, html').animate({
scrollTop: 0
}, 400);
return false;
});
});
CSS
a.back-to-top {
display: none;
text-align: center;
line-height: 50px;
width: 50px;
height: 50px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background-color: #1ab394;
color: #fff;
border-radius: 3px;
}
a.back-to-top:hover {
color: #fff;
}
]]>