Zoom-on-wheel And Pan-on-drag For Image - jQuery dragZoom

File Size: 3.4 KB
Views Total: 5457
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Zoom-on-wheel And Pan-on-drag For Image - jQuery dragZoom

dragZoom is a lightweight and cross-browser image zoom & pan plugin which applies zoom-on-wheel and pan-on-drag functionalities to images you specify.

How to use it:

1. Load the necessary jQuery JavaScript library and mousewheel plugin in the html.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

2. Download and load the dragZoom plugin after jQuery.

<script src="dragZoom.js"></script>

3. Call the function on the target image and specify the scope element as follows:

<div id="box">
  <img src="1.jpg" id="example"/>
  scope: $("body")

4. Specify the initial/min/max zoom levels:

  minzoom: 1,
  maxzoom: 5,
  zoom: 1

5. Customize the mousewheel speed.

  speed: 0.1

6. Callback functions available.

  onWheelStart: null,
  onWheelEnd: null,
  onDragStart: null,
  onDragMove: null,
  onDragEnd: null

This awesome jQuery plugin is developed by VicentDong. For more Advanced Usages, please check the demo page or visit the official website.