Smooth and simple image zoom with jquery plugin which inspired from Medium website. this plugin is create a fully responsive lightbox for images zoom and it will be auto close when the users scrolls down or clicks away.
Table of Contents
More features:
- Image loading spinner.
- Super-smooth transition effects based on CSS3.
- Plenty of options to customize the image lightbox.
How to use :
Add the required jQuery Library after add simplezoom Library in the header for basic lightbox styles :
<link href="path/to/simplezoom.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="path/to/simplezoom.min.js"></script>
Wrap your small image into an a tag pointing to the larger image :
<a href="large.jpg" rel="simplezoom"><img src="small.jpg"></a>
Call the function script :
$('a[rel=simplezoom]').simplezoom();
Add element of lightbox in HTML :
<div class="modal-simplezoom modal">
<div class="modal-bg"></div>
<div class="modal-content">
<div class="simplezoom-item"> <img src="{{img}}" alt="simplezoom-img" /> </div>
</div>
</div>
The default loader HTML :
<div class="simplezoom-loader loader"><i></i></div>
Plugin’s default options. :
// Extra CSS classes added to created element
classie : '',
// Padding offset
offset : 40,
// Automatic close the lightbox once user scroll the page.
scrollclose : true,
// Tell the plugin where to look for the original image.
imgclass : 'img',
// The speed of zoom animation, value in millisecond.
duration : 0,
// Overwrite the default lightbox HTML.
modalTmpl : null,
// Overwirte the default ligthbox loader HTML.
loaderTmpl : null
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
