In many e-Commerce sites (like flipkart, myntra and so on), we see image zooming effects when the mouse is hovered over the product image. In this article, we will see how to use the JQZoom plugin for adding a zoom effect to images.
Let's Start
First, go to
mind projects and download the JQZoom plug-in. Extract the files and copy js and the CSS folder to the root directory of your project. In the Head tag of your webpage add jQuery and the JQZoom plugin script. You can also attach the latest CDN from the jQuery site rather than using the jquery-1.6.js version of jQuery. Add the jquery.jqzoom.css file to the head tag.
<script src="js/jquery-1.6.js"></script>
<script src="js/jquery.jqzoom-core.js"></script>
<link href="css/jquery.jqzoom.css" rel="stylesheet" />
In this Example, I will use two jpeg images (one small thumbnail and one larger).One Important thing is that the small picture (the bikethumb.jpg) that will be used as the thumbnail of the scaled version of the larger image. Basically we want that when the mouse is hovered over the small image, the image appears larger. And we will use the class="minipic" in the JQZoom script.
<a href="images/bike.jpg" class="minipic" title="Cartoon Bike"><img src="images/bikethumb.jpg" title="Bike"/></a>
Now we need to add another script tag to call the jqzoom function. We have ed a parameter in the jqzoom function like zoomtype for the type of effect on mouse hover over the small picture.There are 6 types of ZoomType effects that we can use. Here we set the lens to true so that the lens becomes visible on the hovering of the mouse over the small picture (in other words bikethumb). We can also adjust the zoom width and zoom height of the magnified image.
<script type="text/javascript">
$(document).ready(function () {
$('.minipic').jqzoom({
zoomType: 'standard',
lens: true,
preloadImages: false,
alwaysOn: false,
zoomHeight: 200,
zoomWidth:200
});
});
</script>
Final preview
I hope you like it. Thanks