News

Add lightbox zooms with the JQZoom plug-in

Inspired by the Greats design, here’s a quick guide to adding a similar solution for zooming product shots and adding eCommerce dynamism

JQuery

Download the repository

JQZoom is a plug-in by Italian web developer Marco Renzi that allows you to easily add a zoom effect to images. This is a technique often seen on eCommerce sites to magnify product shots, such as trendy New York trainers. Head over to bit.ly/a8XjEh and download the jqzoom_ev-2.3.zip before unpacking the file. Grab the CSS and JavaScript files or copy them straight into the root of your page.

Attach the plug-in

We start by attaching both jQuery and the plug-in to our HTML document. These can go in your page <head> or before the closing </body> tag, but must appear before the code that is coming later on in Step 4. If you use the latest CDN rather than JQZoom’s included jquery-1.6.js, you must add the migrate plug-in as shown. In addition to jquery.jqzoom-core.js, we also must add the companion CSS file:

001 <script src=”http://code.jquery.    com/jquery-1.10.1.min.js”></script>
 002 <script src=”http://code.jquery.com/jquery-migrate-1.2.1.min.js”></script>
 003 <script src=”jquery.jqzoom-core.js”     type=”text/javascript”></script>
 004 <link rel=”stylesheet” href=”jquery.jqzoom.css” type=”text/css”>

Image and link wrapper

We’re using just two JPEG images in our example, the smaller one being 50 per cent the size of the larger zoom version. This gives us a thumbnail added within an <img> tag that is then wrapped in an <a> tag with a ‘src’ linked to our bigger image.  You must also add in a class name here – plus the title property is used to define a string of text appearing across the top of the zoom effect’s bounding box.

001 <a href=”myImage_Big.jpg” class=”zoomBox” title=”Zoom Text”>
 002 <img src=”myImage_Small.jpg”>
 003 </a>

Call up the plug-in

Now we need another <script> tag, which must be placed below those from Step 2 in the listing of your HTML document. In here we call the jqzoom function on the <a> wrapper element we’ve called zoomBox, once the page has loaded. With this we pass certain plug-in parameters to set how it looks and behaves, in this instance producing an ‘innerzoom’ effect that overlays our thumbnail on hover.

001  <script type=”text/javascript”>
 002  $(document).ready(function() {
 003     $(‘.zoomBox’).jqzoom({
 004     zoomType:’innerzoom’,
 005     preloadImages:false,
 006     alwaysOn:false
 007     });
 008 });
 009 </script>
 010

Extra styling tweaks

When it comes to styling the plug-in you can choose to either edit the jquery.jqzoom.css file or, if you prefer, extend the classes within your page. For example, in our demo we have chosen to customise the zoom effect ever so slightly. This overrides the default border defined by zoomOverlay as well as the colours and font for the overlay title bar.

001 <style>
 002 .zoomWrapperTitle {
 003     background-color:#c9193f;
 004     color:#f3f0eb;
 005     font-family:”Courier New”,     Courier,     monospace;    
 006 }
 007 .zoomOverlay {
 008     border: none;
 009 }
 010 </style>

Experiment and test

By passing more options into the jqzoom() function from Step 4, you can invoke further style and behaviour changes. Setting the dimensions of the zoom box, image positions and offsets as well as fade-in effects is all possible with full options listed in the plug-in documentation (available from bit.ly/cTOEqd). Finally, save your page and test the result by hovering your cursor over the thumbnail image. It zooms!

×