How to Create a Zoom Effect on Image Hover using jQuery

Create zoom Effect on Image Hover using jQuery

Here we will explain how to Create zoom Effect on Image Hover using jQuery image Zoom plugin like e-commerce websites or enlarge image on mouseover using jQuery image Zoom plugin. jQuery image Zoom plugin will provide two features image zoom effect and lightbox effect for the images by setting few properties for our images.

Before using this plugin remember that you need to create two or three sets of different dimension images based on your requirements and place it in your application like as shown below images dimensions

  • Thumbnail – 100 x 67 pixels
  • Small – 411 x 274 pixels
  • Large – 1280 x 854 pixels

To use jQuery image Zoom plugin we need to write the few lines of code like as shown below to set zoom effect for the image on mouseover.

Create zoom Effect on Image Hover using jQuery


<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>How to Create a Zoom Effect on Image Hover with jQuery</title>
	
	
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09%09%2F*set%20a%20border%20on%20the%20images%20to%20prevent%20shifting*%2F%0A%09%09%20%23gallery_01%20img%7Bborder%3A1px%20solid%20white%3B%7D%0A%09%09%20%0A%09%09%20%2F*Change%20the%20colour*%2F%0A%09%09%20.active%20img%7Bborder%3A1px%20solid%20%23333%20!important%3B%7D%0A%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>

<h1>How to Create a Zoom Effect on Image Hover with jQuery</h1>

<img id="zoom_03" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/>


<div id="gal1">
 
  <a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
    <img id="img1" src="images/thumb/image1.jpg" />
  </a>

  <a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
    <img id="img2" src="images/thumb/image2.jpg" />
  </a>

  <a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
    <img id="img3" src="images/thumb/image3.jpg" />
  </a>

  <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
    <img id="img4" src="images/thumb/image4.jpg" />
  </a>

</div>




<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'jquery-1.8.3.min.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'jquery.elevatezoom.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%2F%2Finitiate%20the%20plugin%20and%20pass%20the%20id%20of%20the%20div%20containing%20gallery%20images%0A%24(%22%23zoom_03%22).elevateZoom(%7Bgallery%3A'gal1'%2C%20cursor%3A%20'pointer'%2C%20galleryActiveClass%3A%20'active'%2C%20imageCrossfade%3A%20true%2C%20loadingIcon%3A%20'http%3A%2F%2Fwww.elevateweb.co.uk%2Fspinner.gif'%7D)%3B%20%0A%0A%2F%2Fpass%20the%20images%20to%20Fancybox%0A%24(%22%23zoom_03%22).bind(%22click%22%2C%20function(e)%20%7B%20%20%0A%20%20var%20ez%20%3D%20%20%20%24('%23zoom_03').data('elevateZoom')%3B%09%0A%09%24.fancybox(ez.getGalleryList())%3B%0A%20%20return%20false%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

Hope this tutorial helps you to implement jquery image zoom effect. Below are the links for demo and download.


Download / Demo

You may also like...