Usage

HTML structure

Add f-panzoom class name to your wrapping element, f-panzoom__content to your content:

<div class="f-panzoom" id="myPanzoom">
  <img class="f-panzoom__content" src="https://lipsum.app/id/1/1200x1500" alt="Zoomable image" />
</div>

Sometimes you may need to adjust spacing or to place an element above the content (for example, a copyright notice), in such cases you can wrap your content with an element having class name f-panzoom__wrapper:

<div class="f-panzoom" id="myPanzoom">
  <div class="f-panzoom__wrapper">
    <img class="f-panzoom__content" src="https://lipsum.app/id/1/1200x1500" alt="Zoomable image" />
  </div>
</div>

Don't forget to give the wrapping element some dimensions with CSS, otherwise it will expand and the content may not be zoomable:

#myPanzoom {
  height: 400px;
}

Initialization

const container = document.getElementById("myPanzoom");
const options = {
  // Your custom options
};

Panzoom(container, options).init();

JS Bin Example

Note that .init() must be called to start the panzoom. Without it, the instance is created but not activated.

Adding Plugins

Plugins extend Panzoom with additional features beyond the built-in core features.

Pass an object containing all plugins using the plugins option or as the third parameter to the Panzoom constructor.

Use the plugin name as the object key to specify plugin options.

Here is a basic example:

JavaScript

import { Panzoom } from "@fancyapps/ui/dist/panzoom/panzoom.js";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

import { Controls } from "@fancyapps/ui/dist/panzoom/panzoom.controls.js";
import "@fancyapps/ui/dist/panzoom/panzoom.controls.css";

const container = document.getElementById("myPanzoom");
const options = {
  Controls: {
    display: [
      "zoomIn",
      "zoomOut",
      "toggle1to1",
      "rotateCCW",
      "rotateCW",
      "flipX",
      "flipY",
      "reset",
    ],
  },
};

Panzoom(container, options, { Controls }).init();

TypeScript

import { Panzoom, type PanzoomOptions } from "@fancyapps/ui/dist/panzoom/";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

import { Controls } from "@fancyapps/ui/dist/panzoom/panzoom.controls.js";
import "@fancyapps/ui/dist/panzoom/panzoom.controls.css";

const container = document.getElementById("myPanzoom");
const options: Partial<PanzoomOptions> = {
  Controls: {
    display: [
      "zoomIn",
      "zoomOut",
      "toggle1to1",
      "rotateCCW",
      "rotateCW",
      "flipX",
      "flipY",
      "reset",
    ],
  },
};

Panzoom(container, options, { Controls }).init();

JS Bin Example