ZooMove v1.2.0

What's this?

It's a plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.
Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

Install

Get with npm

$ npm install zoomove --save

Bower

$ bower install zoomove --save

Or CDN (by cdnjs)

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.css">

<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.js"></script>

If you prefer you can just download a ZIP file.

Setup

First, include the script located on the dist folder.

<!-- ZooMove CSS minified -->
<link rel="stylesheet" href="dist/zoomove.min.css">

<!-- jQuery CDN JS minified (must) -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- ZooMove JS minified -->
<script src="dist/zoomove.min.js"></script>

Now need to prepare our(s) image(s) and show to the ZooMove.

<!-- Item image -->
<figure class="zoo-item" data-zoo-image="img/example.jpg"></figure> 

<!-- Starting the ZooMove -->
<script>
   $('.zoo-item').ZooMove();
</script>

Ready, prepared environment, now is hour of our plugin take action and prepare all remaining process.
Now says it is not easy?! ;)

Examples

<!-- Image 1 | Default -->
<figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>

<!-- Image 2 | Scale value "3" (300%) -->
<figure class="zoo-item" data-zoo-image="img/example.jpg" data-zoo-scale="3"></figure>

<!-- Image 3 | Over "true" and Move "false" -->
<figure class="zoo-item" data-zoo-image="img/example.jpg" data-zoo-over="true" data-zoo-move="false"></figure>

How to use

<!-- 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]"
>
</figure>

<!-- JavaScript -->
<script>
   $('.zoo-item').ZooMove({
   	image: '[value]',
   	scale: '[value]',
   	move: '[value]',
   	over: '[value]',
   	cursor: '[value]'
   });
</script>