Do you want to add a zoom effect to your website images? Adding a zoom effect on the image is useful, especially for Fashion and eCommerce websites. In this article, I show you how one can easily add a zoom effect to website images.

This effect is also called image enlarger or magnified images. Using this effect, your visitors can see a large portion of your image on hover.

Following this tutorial, you will get the final output as follows:

Getting Started

For this tutorial, I’ll use the xZoom jQuery Zoom Gallery Plugin. A user can install this plugin through npm, bower, or CDN. In our case, download the Zip package from the GitHub page.

Extract the zip and copy xzoom.css, xzoom.min.js, and xloading.gif. Place these files into the working directory. To demonstrate the zoom effect, we require two images. One is small in size and the other is a large portion of this small image. For demo purposes, you can copy the below images.

• Small Image
• Large Image

Your folder structure should look like the below screenshot.

Add Zoom Effect on An Image

First, include JS and CSS files in your HTML. As this plugin depends on jQuery, you also need to include the jQuery library.

<link rel="stylesheet" href="css/xzoom.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/xzoom.min.js"></script>

After this, to the src attribute of img tag, pass the smaller version of the image. And add the path of the large image to the xoriginal attribute. I am also adding a xzoom class to the img tag which acts as a selector.

<img class="xzoom" src="images/small.jpg" xoriginal="images/large.jpg" />

Finally, call the xzoom() method on your image selector as follows.

$(".xzoom").xzoom();

Reload the page and you should have the zoom effect on your image. The xZoom plugin comes with a lot of options that can be added to your selector. Let’s say you want to set some margin on the right side.

$(".xzoom").xzoom({
    position: 'right',
    Xoffset: 15
});

Here I set the position to the right. It can be top, left, inside, bottom, etc. The Xoffset value sets the left margin on the zoom section. I’d recommend trying the other options provided by a plugin and picking the one which is suitable to your needs. You can read about the options in their documentation.

The final code is as follows.

<link rel="stylesheet" href="css/xzoom.css">
    
<img class="xzoom" src="images/small.jpg" xoriginal="images/large.jpg" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/xzoom.min.js"></script>
<script>
jQuery(function($) {
    $(".xzoom").xzoom({
        position: 'right',
        Xoffset: 15
    });
});
</script>

Related Articles

• How to Implement jQuery Datepicker with Timepicker
• How to Upload, Crop, and Resize Image Using jQuery and PHP
• Drag and Drop Multiple File Upload using JavaScript and PHP

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.