jQuery Magnify Image on Hover Event

Category: Zoom Effects | March 3, 2020
jQuery Magnify Image on Hover Event
Author: CSS Globe
Official Page: Go to Website
Last Update:March 3, 2020
License:MIT

Today, we are going to share a simple jQuery plugin that is useful to magnify the image on hover. When a user hovers on the image thumbnail, this plugin gets the large version of its image and show it in a magnifying box. The plugin is also useful to zoom product image in a tooltip style.

This cool zoom plugin is “easyZoom” that is ultra-lightweight (less than 2KB) and easy to integrate. Although, it comes with a few configurations options. But, the magnifying box can be highly customized with additional CSS styles.

This image zoom plugin can be integrated into an image gallery or slider. You just need to place your thumbnail (a small version of the image) inside the hyperlink. This hyperlink contains the large version of that image. After initialization, this jQuery plugin renders a magnifying box (to zoom image) that follows the mouse direction.

Furthermore, the plugin support image preloading, you are also able to set a custom preloader through its configuration. Similarly, you can provide the custom selector where you want to append a magnifying image box. The plugin also display an error message if the image failed to zoom for any reason.

How to Magnify Image on Hover

In order to magnify the image on hover, we need to getting started with jQuery “easyZoom” plugin. So, first of all, load the jQuery and plugin assets into the <head> tag of your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- easyZoom JS -->
<script type="text/javascript" src="dist/easyzoom.js"></script>

After that, create a container (div element) and place your image inside it. Wrap your image into a hyperlink that contains a full version of the image.

<div id="container">
<p><a href="img/large.jpg" class="zoom"><img src="img/small.jpg" alt="New York"></a></p>
.
.
.
<!-- Place your other contents -->
</div>

You can also place any other HTML contents inside that container. Anyhow, it depends upon your project in which you want to integrate this easy zoom plugin.

At last, activate the plugin by calling it in jQuery document ready function.

$(document).ready(function(){

   $('a.zoom').easyZoom();

});

Magnifying Box Customization

The following are some configuration options to customize the working of the plugin.

OptionDefaultTypeDescription
id‘easy_zoom’StringIt define the (id) selector for the magnifying box.

Example:

$('a.zoom').easyZoom({
	id : 'easy_zoom',
});
parent‘body’StringDefines the selector where the magnifying box will be appended.

Example:

$('a.zoom').easyZoom({
	parent : 'body',
});
appendtrueBooleanEnable/disable append feature.

Example:

$('a.zoom').easyZoom({
	append : true,
});
preload‘Loading…’StringThis option define the text for preloader.

Example:

$('a.zoom').easyZoom({
	preload : 'Loading...',
});
error‘There has been a problem with loading the image.’StringThe message to show the users if image failed to load for any reason.

Example:

$('a.zoom').easyZoom({
	error : 'There has been a problem with loading the image.',
});

CSS Customization

Similarly, you can also customize the magnifying box with a little bit changing in CSS values. You can set the custom CSS for the outer wrapper of the thumbnail image using the “.container” selector.

.container{
  /* Define your CSS styles here */
}
.container img{
/* Styles for image */
}

In the same way, you can also set custom CSS for the magnifying box using the #easy_zoom selector. The default styles are as follows:

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:60px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #777;
	-webkit-box-shadow:0 0 10px #777;
	box-shadow:0 0 10px #777;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

That’s all! if you have any questions about this zoom image plugin, feel free to comment below.

You May Also Like

Leave a Comment