Post
Ask Question

Zoom Image On Mouse Over Using jQuery

In this article I will explain how to zoom an image on mouse over using jQuery. Image mouseover effects can make your website look dynamic and feel more effective. It also helps you to better allocate your image captions. I have seen similar effects as this one in a few sites here and there, and they were always built in Flash. I wanted a CSS and JavaScript (jQuery) solution so I whipped up this Hover Zoom effect.
 
First we download the file: 
  1. jquery.min.js
  2. jquery.fancybox.pack.js 
These files are added to the project, then use the following procedure.
 
Step 1. 
 
Open Visual Studio 2012 and click "File" -> "New" -> "Web Site...". A window is opened. In this window, click "Empty Web Site" under Visual C#. This will be different if you're using a different version of Visual Studio.
 
aplication-name.jpg
 
Give your application the name "Zoom_Image_on_MouseOver" and then click "Ok".
 
Step 2.
 
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. Now add a HTML Page to the Web Site. Right-click on the project name. Select "Add new item". Add the new HTML page and give it a name. The Solution Explorer contains the js file and css file and HTML page.
 
solution-explorer.jpg
 
Coding
 
Zoom_Image_on_MouseOver.html 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title></title>  
  5. <script src="jquery.min.js" type="text/javascript"></script>  
  6. <script src="elevateZoom.js" type="text/javascript"></script>  
  7. <script src="jquery.fancybox.pack.js" type="text/javascript"></script>  
  8. <script src="jquery.fancybox-1.3.4.js" type="text/javascript"></script>  
  9. <style type="text/css">  
  10. #gallery img  
  11. {  
  12. border:2px solid white;width: 96px;  
  13. }  
  14. .activeborder img  
  15. {  
  16. border:2px solid #333 !important;  
  17. }  
  18. #image  
  19. {  
  20. width: 459px;  
  21. }  
  22. </style>  
  23. </head>  
  24. <body>  
  25. <div style="width: 1186px; height: 509px">  
  26. <img id="image" alt="" src="taj.jpg" />  
  27. <div id="gallery">  
  28. <a href="#" class="activeborder" data-image="taj.jpg" data-zoom-image="taj.jpg">  
  29. <img src="taj.jpg" ></a>  
  30. <a href="#" class="activeborder" data-image="image3.jpg" data-zoom-image="image3.jpg">  
  31. <img src="image3.jpg" ></a>  
  32. <a href="#" class="activeborder" data-image="image2.jpg" data-zoom-image="image2.jpg">  
  33. <img src="image2.jpg" ></a>  
  34. <a href="#" class="activeborder" data-image="image5.gif" data-zoom-image="image5.gif">  
  35. <img src="image5.gif" ></a>  
  36. </div>  
  37. </div>  
  38. <script type="text/javascript">  
  39. $(document).ready(function ()  
  40. {  
  41. $("#image").elevateZoom({ gallery: 'gallery', cursor: 'pointer', galleryActiveClass: "activeborder" });  
  42. $("#image").bind("click", function (e) {  
  43. var ez = $('#image').data('elevateZoom');  
  44. ez.closeAll();  
  45. $.fancybox(ez.getGalleryList());  
  46. return false;  
  47. });  
  48. });  
  49. </script>  
  50. </body>  
  51. </html>  
Output
 
Select an image from the given images and move the mouse onto the image to see the zoom in.
 
Animation1.gif
For more information, download the attached sample application.
 
Here is another similar article, Zoom In and Zoom Out Effect on Mouse Move in jQuery. 

 


Similar Articles