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​

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>