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​

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>