ZooMove is a very smooth and easy to implement image zoom jQuery plugin that allows zooming images automatically on mouseover. It also allows viewing details of a specific part of the images with mouse move. The plugin uses CSS3 transition on mouseover and mouse move so you can get a smooth experience while exploring the plugin.
$ npm install zoomove --save$ bower install zoomove --save$ yarn install zoomove1. Include the Javascript zoomove.min.js at the bottom of the web page.
<script src="path/to/zoomove.min.js"></script>2. Include the CSS zoomove.min.css in the header of the page.
<link rel="stylesheet" href="path/to/zoomove.min.css">3. Add the basic HTML to the page.
<figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>4. Initialize the plugin and we're ready to go.
$('.zoo-item').ZooMove();| Property | Default | Description |
|---|---|---|
| data-zoo-image | - | The url of the photo to be displayed. |
| data-zoo-scale | 1.5 (150%) | Sets the zoom size that should be applied to the image. |
| data-zoo-move | true | Choose whether the image should move with the mouse move. |
| data-zoo-over | false | With 'over' it is possible to define whether the image may be above. |
| data-zoo-cursor | false | Define the cursor pointer or default. |
| data-zoo-autosize | true | Sets the size of the automatic image. |
<figure
class="zoo-item"
data-zoo-image="[value]"
data-zoo-scale="[value]"
data-zoo-move="[value]"
data-zoo-over="[value]"
data-zoo-cursor="[value]"
data-zoo-autosize="[value]"
>
</figure>$('.zoo-item').ZooMove({
image: '[value]',
scale: '[value]',
move: '[value]',
over: '[value]',
cursor: '[value]',
autosize: '[value]'
});<figure class="zoo-item" data-zoo-image="path/to/images/demo.jpg"></figure>$('.zoo-item').ZooMove();<figure class="zoo-item" data-zoo-image="path/to/images/demo.jpg" data-zoo-scale="3"></figure>$('.zoo-item').ZooMove();<figure class="zoo-item" data-zoo-image="path/to/images/demo.jpg" data-zoo-over="true" data-zoo-move="false"></figure>$('.zoo-item').ZooMove();