Updated April 12, 2023
Introduction to jQuery Zoom
JQuery zoom plugin is used to enlarge images on click or touch, on mouse hover, on any click events. In jQuery, zooming is used on the different types of images to enlarge for better viewing for the costumers. We have a lot of zoom libraries available on the internet for free, but here we shall discuss on jQuery zoom plugin. As we see all the E-commerce sites have these zooming available for most of the products, it is one of the mandatory functionality for all the e-commerce sites. For eg., Shopify uses the jQuery zoom plugin. It is one of the older plugins, hence has little styling to no styling available, user can customize these stylings for implementation.
Syntax:
jQuery zoom plugin is not a Syntax, but a package or a library to be installed while we use it in our scripts.
If using a NODE setup, this can be installed using the npm package.
npm install jquery-zoomWe can also add a jQuery plugin to the head of our HTML, as,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer="defer"></script>For this plugin to work, jQuery version should be a minimum of 1.7+. Users can inspect themes to see if jQuery has loaded the zoom plugin.
How does Zoom of jQuery Library Work?
Let us see How this zoom plugin of the jQuery library works with few examples.
Example #1 – with mouse Hover
In HTML view part:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class='zoom' id='ex'>
<img src='https://images.unsplash.com/photo-1604881748185-46bff830c5f8?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>Hover</p>
</span>code>In CSS Styling:
.easyzoom {
float: left;
}
.easyzoomimg {
display: block;
}
.easyzoom {
display: inline-block;
}
.easyzoomimg {
vertical-align: bottom;
}In Script:
// Instantiate zoom instance
$(document).ready(function(){
$('#ex').zoom();
});Output:
On Mouse Hover on the image, we can see that the image will be zoomed according to the mouse hover as shown below.
Example #2 – using ‘grab’ zoom.
In JavaScript,
// Instantiate Zoom instance
$(document).ready(function(){
$('#ex').zoom({ on:'grab' });
});In HTML view file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class='zoom' id='ex'>
<img src='https://images.unsplash.com/photo-1604164421643-c5e74b9831d8?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' width='555' height='320' alt='Daisy on the Ohoopee'/>
<h2>Grab: Click on the image to zoom a particular area</h2>
</span>In CSS:
.easyzoom {
float: right;
}
.easyzoomimg {
display: block;
}
.easyzoom {
display: inline-block;
}
.easyzoomimg {
vertical-align: top;
}Output:
Grab is used in cases of click and zoom a particular area of the image. We need to give a mouse click and leave, the image will be zoomed, only after a mouse click again will leave the image be unzoomed.
Example #3 – with a mouse click.
In HTML file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class='zoom' id='ex'>
<img src='https://images.unsplash.com/photo-1604255977447-c7c985c139b0?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' width='555' height='320' alt='Daisy on the Ohoopee'/>
<h2>Click: Click on the image once and leave, on mouse movement, particular area will be zoomed</h2>
</span>In JavaScript file:
// Instantiate zoom click instance
$(document).ready(function(){
$('#ex').zoom({ on:'click' });
});In CSS file:
.easyzoom {
float: right;
}
.easyzoomimg {
display: block;
}
.easyzoom {
display: inline-block;
}
.easyzoomimg {
vertical-align: top;
}Output:
On mouse click and leaving,
On giving a click again, zoom is undone.
We also have ‘toggle’ instance for zooming the images. ‘toggle’ instance will zoom on the mouse click only at that particular area where the mouse has been clicked on the picture. Another part will be left as it is.
Example #4 – with ‘toggle’ event on the image
In HTML view:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class='zoom' id='ex'>
<img src=https://images.unsplash.com/photo-1606225457115-9b0de873c5db?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>Hover</p>
</span>In CSS file:
.easyzoom {
float: left;
}
.easyzoomimg {
display: block;
}
.easyzoom {
display: inline-block;
}
.easyzoomimg {
vertical-align: bottom;
}In JavaScript file:
// Instantiate zoom instance
$(document).ready(function(){
$('#ex').zoom({ on:'toggle' });
});Output:
On toggling,
As per jQuery, we should not load more than one jQuery version at a time. This will increase more load time and pages will become slow on the JavaScript end. There are many other ways of implementing this plugin, depending upon JavaScript events that are triggered on the images.
Zoom plugin can also be removed using a javascript syntax as below.
$('#ex).trigger('zoom.destroy');‘zoom.destroy’ is a javascript event used to remove the zoom over the image provided.
Conclusion
With this, we conclude our article ‘jQuery zoom’. We have seen what jQuery zoom is used for and how this plugin is used to zoom in or out accordingly based on the events triggered on the images such as ‘hover’, ‘toggle’, ‘grab’, ‘click’. This plugin can also be disabled with zoom.destroy event which is a JavaScript event. We have seen a few examples illustrating the jQuery zoom on the images. You can still try your hands on the modification of the examples and also try with zoom.destroy the event handler to check how zoom is being disabled.
Recommended Articles
This is a guide to jQuery Zoom. Here we also discuss the introduction and how the zoom of the jquery library works \ along with different examples and its code implementation. You may also have a look at the following articles to learn more –
