Fancyapps

Custom Controls ​

While you can use Controls 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 supported Panzoom action:

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

List of possible values:

flipX
flipY
move
moveDown
moveLeft
moveRight
moveUp
pan
reset
rotateCCW
rotateCW
swipe
toggleCover
toggleFull
toggleMax
zoom
zoomIn
zoomOut
zoomTo

It is also possible to pass aditional data using the data-panzoom-value data attribute. The value will be passed to execute method:

html
<button data-panzoom-action="moveRight" data-panzoom-value="200">
  Move right 200px
</button>

Example with custom icons and styling:

Sample image

Using API ​

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

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

document.getElementById("vertical").addEventListener("click", () => {
  myPanzoom.execute("flipY");
});
Sample image