jQuery Plugin to Zoom Image on Hover , Click and Grab

An awesome jQuery plugin to zoom images on hover, click and grab event. It support touch to zoom images smoothly. Also plugin provides option to toggle the zoom-in and zoom-out on click event.

Plugin Overview

Plugin: jquery-zoom-image-on-hover-click-grab
Author: Jack Moore
Licence: MIT Licence
Published: January 17, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.10.2 or Latest version

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 138 KB

How to Use zoom image on hover :

1. First of all, load the jQuery and jquery.zoom.js into HTML document to getting started with zoom plugin.

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

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

2. After that, create a div element with a unique id in which your image will be zoom-in & zoom-out on hover and click event.

<div class='zoom' id='myZoom'>
   <img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</div>

3. Now, call the plugin in jQuery document ready function with all default settings.

$(document).ready(function(){

   $('#myZoom').zoom();

});

4. CSS styles for image to zoom .

	/* these styles are for the demo, but are not required for the plugin */
		.zoom {
			display:inline-block;
			position: relative;
		}
		
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}

		.zoom img {
			display: block;
		}

		.zoom img::selection { background-color: transparent; }

		#ex2 img:hover { cursor: url(grab.cur), default; }
		#ex2 img:active { cursor: url(grabbed.cur), default; }

5. The following are the all available options to customize the working of zoom plugin.

$('#myZoom').zoom({
   url: false,
   callback: false,
   target: false,
   duration: 120,
   on: 'mouseover', // other options: grab, click, toggle
   touch: true, // enables a touch fallback
   onZoomIn: false,
   onZoomOut: false,
   magnify: 1
}); 

		

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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...