Responsive Touchable jQuery Image Pan & Zoom Plugin - BeepPanZoom

Responsive Touchable jQuery Image Pan & Zoom Plugin - BeepPanZoom
File Size: 17.1 KB
Views Total: 4786
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.


Change log:


  • 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.