Image Zoom using jQuery Elevate Zoom Plugin
DEMO DOWNLOAD There are many photo zoom plugins available online that can be used to render images that can be zoomed for a bigger ...
https://www.programming-free.com/2013/02/image-zoom-plus-fancybox-feature-using.html?m=0
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!!
Good work and all the best for your future endeavors :-)
ReplyDeleteThank you Amar!
DeleteHello, my the best jquery image zoom plugin http://zoomsl.tw1.ru
ReplyDeleteHello,
ReplyDeleteThank 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,
Hi,
DeleteYou 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!
Hi Priya,
ReplyDeleteI 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
Most Welcome!
Deletethanks you !!!
ReplyDeleteMost Welcome!
Deletehow to pass dynamic image url for zooming
ReplyDeleteThank 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
ReplyDeletethank 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
ReplyDeletecan 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
ReplyDeletewhy Image Zoom using jQuery Elevate Zoom Plugin not support with google chrome safari when i put with my coding website ???
ReplyDeleteGracias por la explicación al plugin.
ReplyDeleteSe 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
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.
ReplyDeleteCan you help
Nice tutorial.
ReplyDeleteCan'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?
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??
ReplyDeleteI've got this errors all the time:
ReplyDeleteUncaught TypeError: undefined is not a function
(anonymous function) jquery-1.9.1.min.js:3
b.event.dispatch jquery-1.9.1.min.js:3
b.event.add.v.handle jquery-1.9.1.min.js:3
b.event.trigger jquery-1.9.1.min.js:4
(anonymous function) jquery-1.9.1.min.js:3
b.extend.each jquery-1.9.1.min.js:3
b.fn.b.each jquery-1.9.1.min.js:4
b.fn.extend.trigger jquery.elevateZoom-3.0.8.min.js:12
(anonymous function) jquery-1.9.1.min.js:3
b.event.dispatch jquery-1.9.1.min.js:3
b.event.add.v.handle
Any idea wath the problem is?
Thanks!
Does anyone know how to get it to switch to constrain from Lightbox Gallery for small screens?
ReplyDeletei want to give this kind of effect in asp.net datalist control. is it possible and if yes can you give example with source. thanks
ReplyDeleteCan you add a print button feature the way Lightbox has done?
ReplyDeleteis it working with jquery 1.11 because it was working fine last day but now it is showing error that elevateZoom is not a function
ReplyDelete