Smooth Image Zoom jQuery Plugin on Mouseover & Mouse Move – ZooMove

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.

Features:

• Lightweight and easy to implement.
• Supports on all modern devices and browsers.
• Smooth transition enabled.
• Dynamically zoom images with mouseover.
• Built with jQuery and CSS3.

Install with npm

$ npm install zoomove --save

Install with bower

$ bower install zoomove --save

Install with yarn

$ yarn install zoomove

How to use it:

1. 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();

Plugin’s default options:

HTML Element

<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>

JavaScript

$('.zoo-item').ZooMove({
   image: '[value]',
   scale: '[value]',
   move: '[value]',
   over: '[value]',
   cursor: '[value]',
   autosize: '[value]'
});