Responsive Touchable jQuery Image Pan & Zoom Plugin - BeepPanZoom

BeepPanZoom is a lightweight, responsive, mobile-friendly image viewer plugin for jQuery that allows the user to view, zoom, pan a specified image in a given container.

How to use it:

1. The plugin requires Hammer.js to provide touch gestures support on your web page.

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

2. Load jQuery library and the jQuery BeepPanZoom plugin's script at the end of your html document.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="beepPanZoom.js"></script>

3. Wrap your image into a container like this:

<div class="container">
  <img src="demo.jpg" style="width:inherit;height:inherit">
</div>

4. Set height & width to the container and hide the overflowing content in the CSS.

.container {
  overflow: hidden;
  width: 400px;
  height: 300px;
}

5. Just call the function on the container element and the plugin will do the rest.

$(".container").beepPanZoom();

Change log:

2017-05-11

• Update beepPanZoom.js

---

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