Drag and zoom any 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.
Dependencies
Panzoom depends on jQuery and Modernizr for its touch gesture support detection.
If Modernizr is not included, touch gestures will simply not be used and it will fail silently.
However, mobile behavior is not supported without Modernizr and its touch support feature detect.
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
For more information, documentation is available in the README.