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.
$('.lightbox').simplezoom();
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.
Documentation
.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.
Options
classie
Extra CSS classes added to created element.
classie: ”
offset
Minimum spacing between user screen and lightbox image.
offset: 40
scrollclose
Automatic close the lightbox once user scroll the page.
scrollclose: true
imgclass
Tell the plugin where to look for the original image. Default to img element.
imgclass: ‘img’
duration
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
modalTmpl
Overwrite the default lightbox HTML. Refer to plugin TEMPLATE variable for guidance.
modalTmpl: null
loaderTmpl
Overwirte the default ligthbox loader HTML. Refer to plugin LOADER variable for guidance.
loaderTmpl: null
Events
The plugin will trigger different events on each state. You might invoke your own function by passing it using options properties.
onModalInit
Trigger when user click on the image element.
onModalClosed
Trigger when user close the lightbox.
onImageLoaded
Trigger when larger version of image successful loaded.
onImageError
Trigger when larger version of image failed to loaded.
Code Examples
Example of passing settings to plugin.
$('.lightbox').simplezoom({
offset : 25,
scrollclose : true
});
Example of invoke own function to plugin onImageError event.
$('.lightbox').simplezoom({
/**
* @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
Question?
Something’s not working? Or any other questions regarding this plugin do let me know using comments form below. Cheer!