Smooth Image Zoom & Pan Plugin With jQuery - ZooMove

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.

<link rel="stylesheet" href="zoomove.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="zoomove.min.js"></script>

2. Add the image to the webpage using zoo-image attribute as follows:

<figure class="zoo-item" 
        zoo-image="image.jpg">
        Loading...
</figure>

3. Initialize the plugin and we're done.

$('.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:

<figure class="zoo-item" 
        data-zoo-image="image.jpg"
        data-zoo-scale="1.5"
        data-zoo-move="true"
        data-zoo-over="false"
        data-zoo-cursor="false"
        data-zoo-autosize="auto">
        Loading...
</figure>

$('.zoo-item').ZooMove({
  
  // image url
  image: 'image.jpg',

  // shows the cursor pointer
  cursor: 'false',

  // zoom size
  scale: '1.5',

  // enable image pan
  move: 'true',

  // whether the image may be above
  over: 'false',

  // auto size image
  autosize: 'true'
  
});

Changelog:

2020-04-13

• v1.3.0: allows to auto size image

2019-08-10

• v1.2.1

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.