Lightweight Image Inner Zooming And Panning Plugin With jQuery - peakzoom

peakzoom is a lightweight and easy-to-use jQuery which allows you to zoom in, rotate and pan an image on mouse click / drag or touch tap / swipe.

How to use it:

1. Place your image into a zoom/pan area like this:

<div id="outer-div">
  <div>
    <img src="demo.jpg">
  </div>
</div>

2. Style and position the image zoom/pan area.

#outer-div {
  width: 256px;
  height: 192px;
  overflow: hidden;
  margin: auto;
  box-shadow: rgba(0,0,0,.5) 0 0 4px;
}

#outer-div div {
  line-height: 0;
  transition-duration: 0.3s;
}

#outer-div img {
  width: 256px;
  height: 192px;
  transition-duration: 0.3s;
  transition-property: transform;/* just for candy: */
}

3. Download the plugin and include the JavaScript file jquery-peakzoom.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="jquery-peakzoom.js"></script>

4. Just call the function on the outer DIV and the plugin will take care of the rest.

$('#outer-div').peakzoom();

5. You can also rotate the image using peakzoom.rotate event.

<input type="button" value="Rotate">

$('input').click(function() {
  $('#outer-div').trigger('peakzoom.rotate');
});

---

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