Panzoom

Documentation

Examples

This rewrite is a work in progress

Have a look at the GitHub project to follow along on the status of this rewrite.

Panzoom is a small library to add panning and zooming functionality to an element. Rather than using absolute positioning or setting width and height, Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.

panzoom.min.js, included in this repo, is compressed with uglifyjs.

For common support questions, see the FAQ at the bottom.

Browser support

Here is a list of currently supported browsers.

Mobile support

iOS, Android, and Windows Mobile are supported.

Panzoom includes support for touch gestures and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. It uses pointer events by default wherever supported.

SVG support

Panzoom supports panning and zooming SVG elements directly.

In IE11, CSS animations/transitions do not work on SVG elements, at least for the transform style. They do work in other browsers.

One could implement transitions manually in IE11 using the setTransform option and integrating a tweening library for javascript animations (such as tween.js).

Loading Panzoom

Panzoom uses UMD and can be loaded a lot of ways.

With ES6 imports:

import Panzoom from 'panzoom'

With AMD loader in an anonymous module:

define(['panzoom'], function(Panzoom) {   Panzoom('.panzoom') })

With script tags:

<script src="/js/panzoom.js"></script>

Initialization

const panzoom = Panzoom('.panzoom', {   maxScale: 5 })

FAQ

1. What is transform-origin and why is it added to the panzoom element?

• The transform-origin is the origin from which transforms are applied. Panzoom ensures the defaults are set to what it expects to calculate focal point zooming.
• HTML elements default to '50% 50%'.
• SVG elements default to '0 0'.

2. I am using Panzoom with an <object> tag. It zooms but does not pan. example

Object elements can eat up events, making it so they never reach Panzoom. To fix this, disable pointer events (pointer-events: none) on the <object> tag and call Panzoom using a wrapper.

3. My links aren't working! How do I enable an anchor within a panzoom element?

Add class options.clickable (default is "clickable") to whatever element you want to be clickable. This will add a listener that calls event.stopImmediatePropagation() to prevent the event from reaching panzoom. You could also do this yourself.