simplezoom – Responsive Image Lightbox jQuery Plugin

by Kenny on
simplezoom.js is a simple responsive image lightbox jQuery plugin for your site inspired by Medium website.

Look Inside

Howdy all! It’s been awhile I stop sharing my works since the time I’m joining an awesome local startup company, life was kinda rush during that period. Well I’m free now, at least!

Today I would like to share you a simple image lightbox jQuery plugin which inspired from Medium website. The plugin will create a zoom-like animation lightbox effect on any images attached with it using CSS3 transition property.

How it works

A clone of original image will be created at the bottom of body tag. At first, the clone will position itself to match the original image, and then move to the center of user screen with default sizes while loading the larger version of the original image. Once the image loaded, it will adjust the position again to fit that image.

Don’t worry, the clone will be removed once the lightbox has closed.

How to use

Include the required library and plugin dependency then use jQuery to find the desired lightbox elements on which to call the simplezoom plugin.


CSS requirement

The elements created by plugin itself is naked, mean no styling at all, so that it’s easier for personalize customization. If you want a quick fix for that, simply include the simplezoom.css stylesheet or copy it to your own stylesheet.


.simplezoom( [options] )

options: object

Just like other plugins, you can configure the global settings of plugin by passing it an javascript object.

Tips: You might use data- attribute to overwrite the plugin global settings for each individual element.


Extra CSS classes added to created element.
classie: ”

Minimum spacing between user screen and lightbox image.
offset: 40

Automatic close the lightbox once user scroll the page.
scrollclose: true

Tell the plugin where to look for the original image. Default to img element.
imgclass: ‘img’

The speed of zoom animation, value in millisecond. Default will use the CSS properties.
Not recommended to set this unless you really don’t know how to set it in CSS.
duration: 0

Overwrite the default lightbox HTML. Refer to plugin TEMPLATE variable for guidance.
modalTmpl: null

Overwirte the default ligthbox loader HTML. Refer to plugin LOADER variable for guidance.
loaderTmpl: null


The plugin will trigger different events on each state. You might invoke your own function by passing it using options properties.

Trigger when user click on the image element.

Trigger when user close the lightbox.

Trigger when larger version of image successful loaded.

Trigger when larger version of image failed to loaded.

Code Examples

Example of passing settings to plugin.

	offset		: 25,
	scrollclose	: true

Example of invoke own function to plugin onImageError event.


	 * @image		: default image link element
	 * @lightbox	: lightbox element
	onImageError: function(image, lightbox) {
		console.error( 'Oops! Image not found.' );


Change Log

V 1.0.0
Yes, it is first release.
4th June 2015


Something’s not working? Or any other questions regarding this plugin do let me know using comments form below. Cheer!

Don't enjoy alone, share with your friends also
Read Next

imgCentering.js – Centering Images with jQuery