Yet another “ImageZoom” is fully Responsive jQuery Image Zoom Plugin that you can Free Download and use on your personal or commercial projects.
Its a super lightweight and tiny jQuery plugin that has the ability to make Zoom effect on the image. Furthermore, it smoothly enlarges the images and pans a specified image when mouse over hover and moving.
With this plugin now the Image Zooming is quite easy. Its full customize and work well on major browsers. Not only this, but it also mobile-friendly and work well on mobile and desktop devices.
In addition, the “ImageZoom” has both the functions to enlarge the image. It can enlarge the part of the image and when you move the cursor, it enlarges that specify part of the image.
Another one is to zoom the image itself that shows the bigger version of the complete image.
How to Create Responsive jQuery Image Zoom
In order to create Image Zoom on Hover with jQuery, we need to start with adding plugin files and need to load the jQuery file. So, load the jQuery and plugin scripts into your webpage.
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/zoomove.min.js"></script>
<link rel="stylesheet" href="dist/zoomove.min.css">
After that, we will create an HTML structure which is very simple and easy to understand. Simply define a div with a class name item then place a figure element inside it.
In the figure element, we will define a class name zoo-image attribute. Additionally, we need to define the image path inside the data-zoo-image attribute.
Moreover, you can also define the data-zoo-scale to define the leave of scale size.
<div class="item">
<figure class="zoo-item" data-zoo-scale="3" data-zoo-image="http://placehold.it/600">Loading...</figure>
</div>Finally, we will initialize the plugin and we’re done.
<script>
$('.zoo-item').ZooMove({
cursor: 'true',
scale: '1.2',
});
</script>The Responsive jQuery Image Zoom Plugin comes with some of the additional attributes that you can define within the figure element. These attributes help you to control the image zoom effect and its functionality.
<figure class="zoo-item"
zoo-image="image.jpg"
zoo-scale="1.5"
zoo-move="true"
zoo-over="false"
zoo-cursor="false">
Loading...
</figure>
Just to make sure that you should define these attributes within the Javascript.
$('.zoo-item').ZooMove({
// image url
image: 'image.jpg',
// shows the cursor pointer
cursor: 'false',
// zoom size
scale: '1.5',
// enable image pan
move: 'true',
// whether the image may be above
over: 'false'
});Changelog:
2019-08-10
- Offer better performance and enhance the code.
- Fix layout issues.
- Make Zoom smooth.
2018-10-26
- Improve source code.
- Fix small issues related to mobile.
- fix for improved performance.