Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Zoom Image Using jQuery

Thursday, Sep 28, 2017

Tags:- jQuery HTML CSS


You will see and use zooming of product images in many ecommerce websites that helps the user to view product details clearly and that is the key factor to increase sales.So,in this tutorial we will show you how to zoom images using jQuery,CSS and HTML.You may also like create image editor using jQuery, HTML5 and CSS.


See Demo
Zoom Image Using jQuery


To Zoom Image Using jQuery It Takes Only Three Step:-

  1. Make a HTML file and define markup
  2. Make a js file and define scripting
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup

We make a HTML file and save it with a name zoom_image.html

<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery-ui.js"></script>
 <script type="text/javascript" src="zoom_image.js"></script>
 <link rel="stylesheet" type="text/css" href="zoom.css">
</head>
<body>

 <div id="image_wrapper">
  <img src="images/image1.jpg">
  <div id="image_div">
  </div>
 </div>
 
 <div id="final_img_div">
  <img src="images/image1.jpg" id="final_img">
 </div>

</body>
</html>

In this step we insert same image in two divs one div is used to control the zoom portion and other is used to display the zoom image and we also insert jQuery and jQuery Ui which is used to drag the div for zoom and also we insert zoom_image.js and zoom.css which we were going to create in next steps.You may also like crop image using jQuery and PHP.



Step 2.Make a js file and define scripting

We make a js file and save it with a name zoom_image.js

$(function() 
{
 $( "#image_div" ).draggable({ containment: "parent" ,drag:function()
 {
  var posi = document.getElementById('image_div');
  document.getElementById("final_img").style.marginTop="-"+(2*posi.offsetTop);
  document.getElementById("final_img").style.marginLeft="-"+(2*posi.offsetLeft);
 }});
});

In this step we use draggable function to drag the 'image_div' so that we display the particular area of image and then we get the offsetTop(Difference between this div and parent div from top) and offsetLeft(Difference between this div and parent div from Left) of image_div which is our moving div and multiply the values by 2 because our dragging div is half of the size of 'image' and 'image_wrapper' and then we set the margins of 'final_img'.You may also like zoom image on hover using CSS3.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name zoom.css

#image_wrapper
{
 position:relative;
 margin-left:10px;
 margin-top:50px;
 width:400px;
 height:400px;
 float:left;
}
#image_wrapper img
{
 width:400px;
 height:400px;
}
#image_div
{
 width:200px;
 height:200px;
 border:1px dashed white;
 position:absolute;
 top:0px;
 box-sizing:border-box;
}
#final_img_div
{
 float:left;
 margin-top:50px;
 margin-left:50px;
 width:400px;
 height:400px;
 border:1px solid;
 overflow:hidden;
}
#final_img
{
 width:800px;
 height:800px;
}

In this step we use simple css, only few things to remember must we use overflow:hidden to hide the full final image and but only show the zoom part of the image.Always use equal width and height of unzoom image and its wrapper and final container of zoom image and always use half width and height of draggable div from 'image_wrapper' div and always use double width and height of the 'final_img' to display zoom correctly.You may also like flip and rotate image using CSS3.


Thats all, this is how to zoom image using jQuery,CSS and HTML.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.