How to Add Zoom Image Effect on Your Website Images

Do you want to add zoom image effect on your website? Adding zoom effect on the image is a common behavior nowadays especially for Fashion, online product selling websites. In this article, we show you how we can easily add zoom image effect.

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.

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

Zoom Image

Getting Started

For this tutorial, we will use this xZoom jQuery Zoom Gallery Plugin. A user can install this plugin through npm, bower or CDN. We would use the CDN to include the plugin files.

Create a file index.html and add the JS and CSS files of plugin.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/xzoom/dist/xzoom.css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>

Add Zoom Image Effect

To add the zoom effect, you need two version of your image – preview, and original. Below are the links for example images.

Once you are ready with your images in both versions, you need to write your img tag as:

<img class="xzoom" src="img/01_b_car.jpg" xoriginal="img/original/01_b_car.jpg" />

After adding above code, call the zoom method on image as follows:

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

Here we set position to right. It can be top, left, inside, bottom, etc. You can read about all options provided by this plugin on their documentation.

Final Code:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/xzoom/dist/xzoom.css" media="all" />

<img class="xzoom" src="img/01_b_car.jpg" xoriginal="img/original/01_b_car.jpg" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>
<script>
  jQuery(function($) {
      $(".xzoom").xzoom({
          position: 'right',
          Xoffset: 15
      });
  });
</script>

We can also add the image gallery with the zoom effect using this plugin. You will get the sample code for adding gallery from official page. Also checkout the demo examples of this plugin.

Related Articles

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

Leave a Reply

Your email address will not be published. Required fields are marked *