Responsive Touchable jQuery Image Pan & Zoom Plugin - BeepPanZoom

Responsive Touchable jQuery Image Pan & Zoom Plugin - BeepPanZoom
File Size: 16.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="//"></script>

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

<script src="//"></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">

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.


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