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.




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!!

Subscribe to GET LATEST ARTICLES!


advertise here

Related

Jquery 3254837010678462425

Post a Comment

  1. Good work and all the best for your future endeavors :-)

    ReplyDelete
  2. Hello, my the best jquery image zoom plugin http://zoomsl.tw1.ru

    ReplyDelete
  3. Hello,

    Thank you very much it works quite well.

    The thing is that I would like to point an html page when clicking on each thumb and the href mentioned in the code doesn't seem to work... Do you know how could I do that ? This would be of great help !

    Thank you,

    ReplyDelete
    Replies
    1. Hi,

      You can do it this way,

      $("#img_01").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active'});

      //pass the url here
      $("#img_01").bind("click", function(e) {
      window.location.href='http://www.google.com';
      return false;
      });

      If you want to use specific urls for each image, you can set a value in the class attribute for each image in the gallery div and use the class id to differentiate between images and assign urls accordingly.

      Hope this helps!

      Delete
  4. Hi Priya,

    I want to use specific urls for each image so that the content be displayed on the right of the gallery just below the zoom. I followed your instructions and the thing is that... it works very well !!

    Thank you so much for your fast reply and kind regards from France :p

    ReplyDelete
  5. how to pass dynamic image url for zooming

    ReplyDelete
  6. Thank you SO MUCH for this! The "example" code on their website does not work and I was pulling my hair out trying to figure out how to make the gallery operate! Thank you, thank you <3

    ReplyDelete
  7. thank for this. It works fine, but i have a problem. When i click on the image, the zoom-image appears in the center but move itself to the right of the window, and i can only see the middle of the image. Any ideas? thanks again

    ReplyDelete
  8. can you give me some links or referance where i can get more about rich web page design...i m more intrested in front end design...Thanks in advance and good work @Priya

    ReplyDelete
  9. why Image Zoom using jQuery Elevate Zoom Plugin not support with google chrome safari when i put with my coding website ???

    ReplyDelete
  10. Gracias por la explicación al plugin.
    Se me ha presentado una dificultad. No me funciona el fancybox.. resulta que los archivos que he bajado de los links que presenta, son muy diferentes a los que usted menciona. Son mucho mas recientes y dentro de los nombres aparecen cada una de las versiones (jquery.elevateZoom-3.0.8.min.js, jquery.fancybox-1.3.4.css, jquery.fancybox-1.3.4.js, jquery.fancybox-1.3.4.pack.js), ahora, como hago para hacer funcionar el fancybox..
    no se si he sido claro pero agradecería sus comentarios.
    graicas

    ReplyDelete
  11. How to pass dynamic image url for zooming. I am passing data-zoom-image path from my code(vb.net) but it is taking src image path for zooming. It's not taking it dynamically in the first time.

    Can you help

    ReplyDelete
  12. Nice tutorial.
    Can't get the Fancybox bit to work, though. I suspect that that's because the version of Fancy box I downloaded is different to the one in your example. I have Fancy box 1.3.4. I have pointed to the new files in the head.

    Any ideas?

    ReplyDelete
  13. I wonder why this plugin lacks the optimization?? It is so good but it will be slows down for first time when changing the image. Could you guys help me out??

    ReplyDelete

emo-but-icon

Currency Converter

Built using AngularJS and ASP.NET Web API

SUBSCRIBE


item