jQuery Plugin For Panning and Zooming Any Elements - panzoom

jQuery Plugin For Panning and Zooming Any Elements - panzoom
File Size: 208 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

panzoom is a simple jQuery plugin that allows you to drag, pan, zoom in/out any elements of your webpage using CSS3. It supports panning and zooming image, text, video, div and many other html elements.

Basic Usage:

1. Create an html element you want to apply panning and zooming functionality on

<div id="panzoom"> 
<img src="1.svg" width="900" height="900"> 

2. Create the zoom in/out control buttons

<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>

3. Include jQuery library and jQuery panzoom on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="dist/jquery.panzoom.js"></script> 

4. Initialize the control buttons

  $zoomIn: $(".zoom-in"),
  $zoomOut: $(".zoom-out"),
  $zoomRange: $(".zoom-range"),
  $reset: $(".reset")

5. Options.

// Should always be non-empty
// Used to bind jQuery events without collisions
// A guid is not added here as different instantiations/versions of panzoom
// on the same element is not supported, so don't do it.
eventNamespace: '.panzoom',

// Whether or not to transition the scale
transition: true,

// Default cursor style for the element
cursor: 'move',

// There may be some use cases for zooming without panning or vice versa
disablePan: false,
disableZoom: false,

// Pan only on the X or Y axes
disableXAxis: false,
disableYAxis: false,

// Set whether you'd like to pan on left (1), middle (2), or right click (3)
which: 1,

// The increment at which to zoom
// adds/subtracts to the scale each time zoomIn/Out is called
increment: 0.3,

// Turns on exponential zooming
// If false, zooming will be incremented linearly
exponential: true,

// Pan only when the scale is greater than minScale
panOnlyWhenZoomed: false,

// min and max zoom scales
minScale: 0.3,
maxScale: 6,

// The default step for the range input
// Precendence: default < HTML attribute < option setting
rangeStep: 0.05,

// Animation duration (ms)
duration: 200,
// CSS easing used for scale transition
easing: 'ease-in-out',

// Indicate that the element should be contained within it's parent when panning
// Note: this does not affect zooming outside of the parent
// Set this value to 'invert' to only allow panning outside of the parent element (basically the opposite of the normal use of contain)
// 'invert' is useful for a large panzoom element where you don't want to show anything behind it
contain: false

// Transform value to which to always reset (string)
// Defaults to the original transform on the element when Panzoom is initialized
startTransform: undefined,

// This optional jQuery collection can be set to specify all of the elements
// on which the transform should always be set.
// It should have at least one element.
// This is mainly used for delegating the pan and zoom transform settings
// to another element or multiple elements.
// The default is the Panzoom element wrapped in jQuery
// See the [demo](http://timmywil.github.io/jquery.panzoom/demo/#set) for an example.
// Note: only one Panzoom element will still handle events for a Panzoom instance.
// Use multiple Panzoom instances for that use case.
$set: $elem,

// Zoom buttons/links collection (you can also bind these yourself - e.g. `$button.on("click", function( e ) { e.preventDefault(); $elem.panzoom("zoomIn"); });` )
$zoomIn: $(),
$zoomOut: $(),
// Range input on which to bind zooming functionality
$zoomRange: $(),
// Reset buttons/links collection on which to bind the reset method
$reset: $(),
// For convenience, these options will be bound to Panzoom events
// These can all be bound normally on the Panzoom element
// e.g. `$elem.on("panzoomend", function( e, panzoom ) { console.log( panzoom.getMatrix() ); });`
onStart: undefined,
onChange: undefined,
onZoom: undefined,
onPan: undefined,
onEnd: undefined,
onReset: undefined

Change logs:

v3.2.2 (2016-08-29)

  • [zoom] remove exponential option; add linear option

v3.2.1 (2016-08-13)

v3.2.0 (2016-07-27)

  • SVG: use CSS transitions on SVG elements wherever supported
  • [Pointer events] add back support for pointer events

v3.1.1 (2016-07-20)

  • update.

v2.0.6 (2016-02-02)

  • update.

v2.0.5 (2014-04-03)

  • update.

v2.0.4 (2014-04-03)

  • update.

v2.0.3 (2014-03-28)

  • Get offset every time when zooming unless parentOffset is set specifically

v2.0.2 (2014-03-28)

  • update.

v1.12.6 (2014-03-27)

  • update.

v1.12.5 (2014-03-25)

  • update.

v1.12.4 (2014-03-14)

  • update.

v1.12.3 (2014-03-13)

  • update.

v1.12.2 (2014-03-12)

  • update.

v1.12.1 (2014-03-05)

  • update.

v1.12.0 (2014-03-04)

  • update.

v1.11.2 (2014-02-28)

  • update.

v1.11.0 (2014-02-27)

  • Document static properties.
  • Add pointerEvent test results to the Panzoom object for convenience.

v1.9.1 (2014-01-28)

  • version update.

v1.9.0 (2014-01-24)

  • version update.

v1.8.6 (2014-01-14)

  • version update.

v1.7.0 (2013-10-16)

  • Pass through all original properties from the closing click or touch event to the panzoomend event.

v1.7.0 (2013-10-16)

  • Support CommonJS syntax

v1.6.8 (2013-09-15)

  • Move default step for range inputs to an option. Give input attribute precendence over default, but explicit option precendence over attribute.

v1.6.7 (2013-09-06)

  • Add mousewheel plugin to fix demo across browsers. 
  • Account for auto marginRight when text-align is not center on the panzoom element's parent.

v1.6.7 (2013-09-06)

  • Add mousewheel plugin to fix demo across browsers. 
  • Account for auto marginRight when text-align is not center on the panzoom element's parent.

v1.6.5 (2013-08-23)

  • Stick to attributes for SVG to avoid conflicts with style
  • Demos and docs updates for focal point zooming

v1.6.1 (2013-08-17)

  • Fix an issue with how the increment is used in .zoom()

v1.5.0 (2013-08-15)

  • Update demo and homepage for focal point zooming

v1.4.2 (2013-08-13)

  • Release minor patch v1.4.2

v1.4.1 (2013-08-13)

  • Fix inverted contianment for when the panzoom element is larger than its container.

This awesome jQuery plugin is developed by timmywil. For more Advanced Usages, please check the demo page or visit the official website.