Simple jQuery Zoom Image on Hover

The “jquery_zoom” is a lite, homestyle and lightweight jQuery plugin that is useful to create simple zoom image on hover functionality. Besides this, it also offer to zoom image on other events e.g grab, click and toggle etc. You can also define custom magnify scale and transition for zoom effect in its configuration options.

Moreover, this plugin also support custom callback function to execute.

Plugin Overview and Preview

Plugin: jquery_zoom_plugin
Author: Nabed Khan
Category: Zoom
Published: 11 months ago
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 233 KB
Dependencies: jQuery 3.0 or Latest version and Bootstrap 4.1.3
Last Modified:
MIT
1,360

How to Create Simple jQuery Zoom Image On Hover

1. In order to create simple jQuery zoom image on hover we need to start with “jquery_zoom” plugin. So, load the jQuery and Bootstrap CSS into your webpage. Bootstrap is optional.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. After that, include the zoom_plugin’s CSS and JavaScript file in your HTML document.

<!-- jquery_zoom_plugin CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- jquery_zoom_plugin JS -->
<script src="js/jquery.zoom.js"></script>

3. Create HTML div element and place your image in it like below.

    <div class="container">
        <!-- 1st row -->
        <div class="row">
            <div class="col-md-12">
                <h2>JQuery Zoom Plugin</h2>
            </div>
        </div>
        <!-- 2nd row -->
        <div class="row">
            <div class="col-lg-6">
                <div class='zoom'>
                    <img src='images/image 1.jpg' width='555' height='320' alt='Nabed Khan'/>
                </div>
            </div>
            <div class="col-lg-6">
                <div class='zoom'>
                    <img src='images/image 2.jpg' width='555' height='320' alt='Nabed Khan'/>
                </div>
            </div>
            </div>
   </div> 

4. At the end, call the zoom plugin in jQuery document ready function and done.

$(document).ready(function(){
	$('.zoom').zoom();
});
Changelog
13/12/2019

  • Initial release.

Advance Configuration Options for Zoom Image on Hover

The following are some advanced configuration options to create / customize simple jQuery zoom image on hover.

Option Default Type Description
on ‘mouseover’ String It define the event on which the zoom effect will initialize. Possible options: grab, click, toggle.

Example:

$('.zoom').zoom({
	on : 'mouseover',
}); 
magnify 1 Number The zooming level in number.

Example:

$('.zoom').zoom({
	magnify : 1,
}); 
duration 120 Number This option define the transition duration in milliseconds.

Example:

$('.zoom').zoom({
	duration : 120,
}); 
touch true Boolean Enable / disable touch fallback for zoom.

Example:

$('.zoom').zoom({
	touch : true,
}); 
callback false Function In this option, you can define your callback function.

Example:

$('.zoom').zoom({
	callback : false,
});