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" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<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"/>
</div>

$('#demo').dragZoom({
  scope: $("body")
}>

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

$('#demo').dragZoom({
  minzoom: 1,
  maxzoom: 5,
  zoom: 1
}

5. Customize the mousewheel speed.

$('#demo').dragZoom({
  speed: 0.1
}

6. Callback functions available.

$('#demo').dragZoom({
  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.