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 illustration purpose. Click on the image to display in the lightbox. After that, move the mouse around to zoom it:
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 them from the plug-in page.
This jQuery code simply triggers the lightbox:
jQuery(".zb").zbox( { margin:40 } );
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.
Complete code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" media="all" href="css/jquery.zbox/jquery.zbox.css" />
<!-- <script type="text/javascript" src="jquery-1.10.2.js"></script> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zbox/jquery.zbox.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery(".zb").zbox( { margin:40 } );
});
//]]>
</script>
</head>
<body>
<div id="wrapper">
<h3>Click on image to open lightbox</h3>
<a class="zb" rel="group" href="images/long.png" title="long">
<img src="images/long-sm.png"/>
</a>
</div><!-- wrapper -->
</body>
</html>
A demo of vertical image zoom
See the following demo where a vertical image is used rather than a horizontal one as used in the 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.
Code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" media="all" href="css/jquery.zbox/jquery.zbox.css" />
<!-- <script type="text/javascript" src="jquery-1.10.2.js"></script> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zbox/jquery.zbox.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery(".zb123").zbox( { margin:40 } );
});
//]]>
</script>
</head>
<body>
<div id="wrapper">
<h3>Click on image to open lightbox</h3>
<a class="zb123" rel="group" href="images/tall.png" title="tall">
<img src="images/tall-sm.png"/>
</a>
</div><!-- wrapper -->
</body>
</html>
An example of a 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.
Online demo and code
The following markup is used for this demo:
<div id="wrapper"> <h3>Click on image to open lightbox</h3> <a class="zoom-demo" rel="group" href="images/cal-large2.jpg" title="tall"> <img src="images/cal-sm2.jpg"/> </a> </div>
The script:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".zoom-demo").zbox( { margin:40 } );
});
</script>