jQuery Image Zoom on Hover

January 04, 2020 No comments jQuery Plugin Zoom

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.

Jquery image zoom on hover

2. Plugin Overview

Library jquery-zoom-image
Author Jack Moore
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.10.2 or Latest version


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' />

3.4. Initialize the plugin:


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.

{{ message }}

{{ 'Comments are closed.' | trans }}