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.

Download ZooMove
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
Images by http://lorempixel.com
Loading...
Image 1
Loading...
Image 2
Loading...
Image 3
<!-- 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
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
<!-- 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>