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.
| Option | Default | Type | Description |
|---|---|---|---|
| id | ‘easy_zoom’ | String | It define the (id) selector for the magnifying box.
Example: $('a.zoom').easyZoom({
id : 'easy_zoom',
}); |
| parent | ‘body’ | String | Defines the selector where the magnifying box will be appended.
Example: $('a.zoom').easyZoom({
parent : 'body',
}); |
| append | true | Boolean | Enable/disable append feature.
Example: $('a.zoom').easyZoom({
append : true,
}); |
| preload | ‘Loading…’ | String | This option define the text for preloader.
Example: $('a.zoom').easyZoom({
preload : 'Loading...',
}); |
| error | ‘There has been a problem with loading the image.’ | String | The 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.