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" />
</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" />
  </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

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