Zoom Image Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery CSS HTML | Written & Updated By - Riya

In this tutorial we will show you how to zoom images using jQuery,CSS and HTML, 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.

You may also like create image editor using jQuery, HTML5 and CSS.

CHECK OUT THIS TUTORIAL LIVE DEMO →

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

Make a HTML file and define markup
Make a js file and define scripting
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. I hope this tutorial on zoom image using jQuery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪