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.

[intro_ad]

Plugin Overview and Preview

Plugin: jquery_zoom_plugin
Author: Nabed Khan
Category: Zoom
Published: January 20, 2024
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
6,870
[ad_after_overview]

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,
}); 
[ad_after_artical]
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...