jQuery Plugin For Image Lightbox – simplezoom

File Size: 391.07 KB
Views Total: 832 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

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 :


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>

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


List Of Version :


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.