Simple jQuery Plugin For Medium.com Style Image Lightbox - simplezoom

Simplezoom is a lightweight jQuery plugin to creating a fully responsive lightbox for zooming images that will auto close as the visitor scrolls away or clicks away. Inspired from Medium's Image zoom.

See also:

• Medium Style Image Zoom Plugin with jQuery - zoom.js

More features:

• Image loading spinner.
• Super-smooth transition effects based on CSS3.
• Plenty of options to customize the image lightbox.

Basic usage:

1. Load the required simplezoom.css in the header for basic lightbox styles.

<link href="path/to/simplezoom.css" rel="stylesheet">

2. Wrap your small image into an a tag pointing to the larger image.

<a href="large.jpg" rel="simplezoom"><img src="small.jpg"></a>

3. Load jQuery library and the jQuery simplezoom plugin's script at the end of the document.

<script src="jquery.min.js"></script>
<script src="path/to/simplezoom.min.js"></script>

4. Enable the plugin.

$('a[rel=simplezoom]').simplezoom();

5. The default lightbox 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>

6. The default loader HTML.

<div class="simplezoom-loader loader"><i></i></div>

7. 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

8. Plugin events.

// Trigger when user click on the image element.
onModalInit

// Trigger when user close the lightbox.
onModalClosed

// Trigger when larger version of image successful loaded.
onImageLoaded

// Trigger when larger version of image failed to loaded.
onImageError

---

This awesome jQuery plugin is developed by kennyooi. For more Advanced Usages, please check the demo page or visit the official website.