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: [last-modified]

MIT

Fork on GitHub

7,858

Demo Download Download Master Repository

[ad_after_overview]

Documentation
Configuration Options
Changelog

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]

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.