Custom Controls #

While you can use Toolbar plugin to quickly create a toolbar with various buttons, you can easily create your own controls for a more customized user experience.

Using Data Attributes #

Simply add data-panzoom-action data attribute to any DOM element in the container to attach a click event handler that executes the corresponding Panzoom method:

<button data-panzoom-action="zoomIn">Zoom in</button>

List of possible values:

fitX
fitY
flipX
flipY
iterateZoom
reset
rotateCCW
rotateCW
toggleCover
toggleFullscreen
toggleMax
toggleZoom
zoomIn
zoomOut
zoomToCover
zoomToFit
zoomToFull
zoomToMax

It is also possible to perform any transformation using the data-panzoom-action data attribute. The value will be passed to applyChange method:

<button data-panzoom-change='{"angle": 90}'>Rotate</button>

Example with custom icons and styling:

Using API #

If you need to place controls outside of the container, you can use a reference to the Panzoom instance to execute any instance method. Example:

document.getElementById("horizontal").addEventListener("click", () => {
  pz.flipX();
});

document.getElementById("vertical").addEventListener("click", () => {
  pz.flipY();
});