Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

Summary

A simple image lightbox jQuery plugin which inspired from Medium website.
Plugin demo URL: http://www.inwebson.com/demo/simplezoom/demo/

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.

Options

Name Default Description
classie '' Extra CSS classes added to created element.
offset 40 Minimum spacing between user screen and lightbox image.
scrollclose true Automatic close the lightbox once user scroll the page.
imgclass 'img' Tell the plugin where to look for the original image. Default to img element.
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.
modalTmpl Overwrite the default lightbox HTML. Refer to plugin TEMPLATE variable for guidance.
loaderTmpl Overwirte the default ligthbox loader HTML. Refer to plugin LOADER variable for guidance.
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 - 4th Jun 2015
Yes, it is first release.

About

Responsive image lightbox jQuery plugin

Resources

Releases

No releases published

Packages

No packages published