jQuery Image Zoom on Hover

1. Introduction

jquery-zoom-image is a small jQuery plugin for zooming images on mouseover or mousedown events. The plugin also supports touch and allows to zoom-in and zoom-out on click event.

2. Plugin Overview

Demo

3. How to install and use jquery-zoom-image jQuery plugin

Follow the below steps to install jquery-zoom-image jQuery plugin on your website.

3.1. First of all we need to include jQuery library into our document:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

3.2. Add jquery-zoom-image plugin JavaScript file:

<!-- Zoom Js -->
<script src='jquery.zoom.js'></script>

3.3. Create an HTML tag with a unique id that wraps the image to :

<span class='zoom' id='ex1'>
<img src='https://frontbackend.com/storage/resources/jquery-zoom-js/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee' />
<p>Hover</p>
</span>

3.4. Initialize the plugin:

$(document).ready(function(){
   $('#ex1').zoom();
});

4. Conclusion

In this article, we presented jquery-zoom-image plugin for zooming images using mouse and touch events. The plugin gives a great experience for users who can zoom the image in an intuitive way. Zooming option is a great feature on e-commerce websites, where we can check the details about buying items.