This time I will share jQuery Plugin and tutorial about Smooth Image Zoom & Pan Plugin With jQuery – ZooMove, hope it will help you in programming stack.
ZooMove is a super tiny jQuery/HTML5 image zoom plugin which smoothly enlarges and pan a specified image when mouse hovering and moving.
How to use it:
1. Add jQuery JavaScript library and the jQuery ZooMove plugin’s script to the webpage.
1 |
< link rel = "stylesheet" href = "zoomove.min.css" > |
2 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
3 |
< script src = "zoomove.min.js" ></ script > |
2. Add the image to the webpage using zoo-image
attribute as follows:
1 |
< figure class = "zoo-item" |
3. Initialize the plugin and we’re done.
1 |
$( '.zoo-item' ).ZooMove(); |
4. Default configuration options. Note that the following options can be passed via zoom-OPTION
attributes or by passing an object literal when initializing plugin as follows:
1 |
< figure class = "zoo-item" |
2 |
data-zoo-image = "image.jpg" |
6 |
data-zoo-cursor = "false" |
7 |
data-zoo-autosize = "auto" > |
01 |
$( '.zoo-item' ).ZooMove({ |
Changelog:
2020-04-13
- v1.3.0: allows to auto size image
2019-08-10
2018-10-26
- fix for improved performance
This awesome jQuery plugin is developed by thompsonemerson. For more Advanced Usages, please check the demo page or visit the official website.