You may have already seen the zoom effect on the view product details page on e-commerce websites. The part of the image will zoom according to the mouse movement.
You can also implement this on your own website to provide a better user experience and allow them to get a closer look at an image.
In this tutorial, I am using the ZooMove jQuery plugin for zoom functionality. It is easy to implement and customizable.
Contents
1. Download and include
- You can download this plugin from here.
- Add CSS on the page
<head>section.
<link href='zoomove-master/dist/zoomove.min.css' rel='stylesheet' type='text/css'>
- Include the plugin script with the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src='zoomove-master/dist/zoomove.min.js' type='text/javascript'></script>
2. Setup
HTML
Create <figure class="zoo-item"> element and specify your image source in data-zoo-image attribute.
<!-- image --> <figure class="zoo-item" data-zoo-image="image.jpg"></figure>
Script
Call ZooMove() method on .zoo-item class.
NOTE – Either put the script after
<figure >elements creation or put it at the end of the<body>or<html>.
<script type='text/javascript'>
$('.zoo-item').ZooMove();
</script>
3. Other Attributes and options
There are some attributes and options for modifying the default functionality.
Attributes
- data-zoo-image – Take image source.
- data-zoo-scale – Specify the zoom size. The default is 1.5 (150%). e.g.
data-zoo-scale="5" - data-zoo-move – The image will move with mouse movement or not. The default value is true. e.g.
data-zoo-move="false". - data-zoo-over – Define whether the image may be above. The default value is false. e.g.
data-zoo-over="true". - data-zoo-cursor – Set either pointer or default cursor. The default values is false. e.g.
data-zoo-cursor="true".
Example –
<figure class="zoo-item" data-zoo-image="image.jpg" data-zoo-scale="5" data-zoo-move="true" data-zoo-over="true" data-zoo-cursor="true" ></figure>
Options
You can also do customization with options in the script.
Example –
Here, I am specifying the same values as above.
$('.zoo-item').ZooMove({
image: 'image.jpg',
scale: '5',
move: 'true',
over: 'true',
cursor: 'true'
});
4. Conclusion
This jQuery plugin enlarges the image on mouseover for this you need to specify your image source in the <figure class='zoo-item'> element using data attribute and call ZooMove() method on class='zoo-item'.
For more customization use available attributes or options.
Browser support –
- Chrome – 42+
- Firefox – 41+
- IE – 9+
- Opera – 29+
- Safari – 9+
- Edge – 12+
