jQuery Plugin For Image Lightbox – simplezoom

LightBox
Demo    Download
Simple jQuery Plugin For Medium.com Style Image Lightbox - simplezoom
File Size: 391.07 KB
Views Total: 373 views
Last Update:December 12, 2015
Publish Date: June 10, 2015
Official Website: Go to website
License: MIT
Plugin Author: kennyooi

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.

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

List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.