jQuery Panzoom - a progressive plugin to create panning and zooming functionality for an element

Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+.

 

Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions 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.

IE<=8 is not supported, but this plugin is future-proof.

 

Mobile support

Panzoom includes support for touch gestures on iOS and Android and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You'll be amazed at how well this performs on your mobile device.

SVG support

Panzoom supports panning and zooming SVG elements directly, in browsers that support SVG.

More info

Panzoom is incredibly customizable. Some options include:

  • Disabling all combinations of panning and zooming (There's not a lot of overhead in using this plugin just for dragging or zooming alone).
  • Containment within the parent element (the panned element will not go outside its parent).
  • Turn on/off transitioning
  • Event callbacks

 

 

w10schools
2013-12-19 09:10:18
Comments
Leave a Comment

Please login to continue.