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 this to retrieve references to the content, container, check their dimensions, and get a lot of other useful information.

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

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

Panzoom(container, options).init();

Available Events

Name	Description
*	Any event
action	Action is being executed (for example, "zoomIn")
animationEnd	Animation has ended
animationStart	Animation has started
click	Single click event detected
dblClick	Double click event detected
destroy	Instance is destroyed
error	Content did not load successfully
init	Initialization has started
initLayout	Layout is initialized
initPlugins	Plugins are initialized
loaded	Content successfully loaded
loading	Content is loading
pinch	Pinch-zoom gesture detected
ready	Panzoom has successfully launched
refresh	Container and content dimensions are updated
render	Viewport CSS properties are updated
touchEnd	Pointer up/cancel event detected
touchStart	Pointer down event detected
wheel	Wheel event detected