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

Simple jQuery Plugin For Medium.com Style Image Lightbox - simplezoom
File Size: 15.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.