Events #

Panzoom exposes custom events that can be hooked on to. To set event listeners, use the on option when initializing Panzoom, or you can use the on() API method.

The first argument each listener receives is a reference to the current Panzoom instance. Use it to retrieve references to content, container, check their dimensions and get many other useful information.

const container = document.getElementById("myPanzoom");
const options = {
  click: "toggleCover",
  on: {
    afterLoad: (instance) => {
      console.log("Content has loaded successfully!");

      console.log("This is a reference to a content DOM element:");
      console.log(instance.content);
    },
  },
};

new Panzoom(container, options);

Available Events #