Sunday, 10 February 2013

Image Zoom using jQuery Elevate Zoom Plugin

There are many photo zoom plugins available online that can be used to render images that can be zoomed for a bigger view of parts of the image. This is common now in almost every media related and e-commerce website. One more feature that is being extensively used is the Mac-like lightbox feature which enables you to view the image in its original size in a modal dialog box that floats on top of the browser. These two features can be used at a time on an image using "Elevate jQuery Photo Zoom" plugin that provides support for "FancyBox" (jQuery lightbox library). In this post, I am going to explain how to create image zoom effect and lighbox feature on a gallery of images with Elevate jQuery plugin and FancyBox plugin.

View Demo Download

1. First of all download all the required plugins,

2. Copy the following files from the above downloads and place it in your project folder.

jquery.fancybox.css
jquery.elevateZoom-2.5.3.min.js
jquery.fancybox.js
jquery.fancybox.pack.js

3. Next step is to set up the images for creating gallery. In this post I have used four images. You have to create three sets of these four images for thumbnail, small and large views. I have used the following dimensions, you can use different set of dimensions as per your requirement.

a. thumbnail - 100 x 67 pixels

b. small - 411 x 274 pixels

c. large - 1280 x 854 pixels

Copy all these images and place it in the project location.

4. Copy and paste the below code in the html file. Make sure you edit the 'src' attribute for all the css and js files that are referenced here to fit to the location of your project folder.

<!DOCTYPE html>
<html>
<head>
 <meta charset='utf-8'/>
 <title>jQuery elevateZoom Demo</title>
 <link href="jquery.fancybox.css" rel="stylesheet" type="text/css" />  
 <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
 <script src='jquery.elevateZoom-2.5.3.min.js'></script>
 <script src='jquery.fancybox.js'></script>
 <style type="text/css">
 #gallery_01 img{border:2px solid white;}
 .active img{border:2px solid #333 !important;}
 </style>
</head>
<body style="text-align:center;">
<h1>Image Zoom with FancyBox support using Elevate Zoom Plugin</h1>
<img id="img_01" src="small/image_1.jpg" data-zoom-image="large/image_1.jpg"/>

<div id="gallery_01"> 
  <a href="#" data-image="small/image_1.jpg" data-zoom-image="large/image_1.jpg">
    <img id="img_01" src="thumb/image_1.jpg" />
  </a>
  
  <a href="#" data-image="small/image_2.jpg" data-zoom-image="large/image_2.jpg">
    <img id="img_01" src="thumb/image_2.jpg" />
  </a>

  <a href="#" data-image="small/image_3.jpg" data-zoom-image="large/image_3.jpg">
    <img id="img_01" src="thumb/image_3.jpg" />
  </a>

  <a href="#" data-image="small/image_4.jpg" data-zoom-image="large/image_4.jpg">
    <img id="img_01" src="thumb/image_4.jpg" />
  </a>
</div>

<script>

$("#img_01").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active'}); 
//pass the images to Fancybox
$("#img_01").bind("click", function(e) {  
  var ez =   $('#img_01').data('elevateZoom'); 
 $.fancybox(ez.getGalleryList());
  return false;
});

</script>
</body>
</html>

4. That is all you have to do! Now open the html file in browser. Mouse hover the images to see zoom effect as shown below.

Click on the main image to see the image in fancybox as shown below.

Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!