Overview
Easy to use panning and zooming gestures for any HTML content.
Key Features
- Throw momentum and friction effect
- Bouncing off the the edges
- Rubber banding
- Touch and mobile optimized with drag and pinch-to-zoom gestures
- Click and double-click events
- Supports images and automatically adjusts
maxScale
to actual image dimensions
Quick demo

Usage
tip
Do not forget to include panzoom.css
file!
Add panzoom
class name to your wrapping element, panzoom__content
to your content and then use API to initialise Panzoom, example:
<div id="myPanzoom" class="panzoom">
<img
class="panzoom__content"
src="https://lipsum.app/id/1/2000x1500"
alt=""
/>
</div>
const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), {
// Your options go here
});
Optionally, use CSS to customize container
.panzoom {
width: 400px;
height: 300px;
}
If you need to display multiple elements (for example, a caption below your content),
use wrapper around content with panzoom__viewport
class name (demo):
<div id="myPanzoom" class="panzoom">
<div class="panzoom__viewport">
<img
class="panzoom__content"
src="https://lipsum.app/id/1/2000x1500"
alt=""
/>
</div>
<p>Simple caption</p>
</div>