Skip to main content

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>