jQuery lightbox with Zoom functionality

The zoom functionality in lightbox images

In this tutorial, I am going to show a jQuery lightbox plug-in that enables your visitors zooming the part of an image.

In another tutorial, I used the simple plug-in for showing images in lightbox while using the Bootstrap framework.

By using this plug-in, the gallery of images can be displayed and as a user clicks on any image, it will be displayed in a lightbox. Additionally, a “lens“ will appear to zoom the part of an image where user focuses the mouse over the image. See the following section for demos and how you can use this.

A demo of jQuery lightbox with zoom feature

In this demo, only an image is used for the illustration purpose. Click on the image to display in lightbox. After that, move the mouse around for zooming it:

jQuery lightbox zoom

See online demo and code

This is how the plug-in is set up.

First of all, you need to include the jQuery library along with plug-in’s JS and CSS files. You may get these from the demo page after view source and save those files in your system or download from the plug-in page.

This jQuery code simply triggers the lightbox:

 

Finally, the markup section where anchor tag contacting the big image is given the “zb” class.  Within that anchor, the smaller image is specified in an <img> tag – that’s it. See the complete code on the demo page.

A demo of vertical image zoom

See the following demo where a vertical image is used rather a horizontal one as used in above example. Implementation wise, there is no difference. Just like in above demo, you need to specify the large image in the anchor tag with “zb” class (or any other class name of your choice). While the smaller image is specified in <img> tag inside that anchor.

jQuery lightbox zoom vertical

See online demo and code

An example of calculator with small size

To see the benefit of the zoom feature, I have taken a raw calculator images (small and large) and used with the jQuery lightbox zoom plug-in. A few digits are displayed in the calculator. As you open the lightbox and zoom the calculator, you can see digits easily.

jQuery lightbox zoom digit

See online demo and code

The following markup is used for this demo:

 

The script: