jQuery PanZoom Example

benlumley

jQuery PanZoom by Ben Lumley
@benlumley
http://benlumley.co.uk/
https://github.com/benlumley/jQuery-PanZoom

Switch Images

Click an image below to switch the image above to it.

Controls

Zoom


Zoom In

Zoom Out

Pan


Pan Up

Pan Down

Pan Left

Pan Right

Fit/Destroy


fit/reset

destroy

re-initialise

Other Controls

You can also drag the image around or zoom with your mousewheel when hovering. Double click will zoom too.

Output

View the current co-ordinates live. You will probably want hidden fields, but whilst they are visible, try changing the numbers.

x1: x2:
y1: y2:

Attribution

Example images from flickr user kevindooley here, here and here, licensed under Creative Commons Attribution 2.0 Generic

Icons from http://www.famfamfam.com/lab/icons/silk/

Fork me on GitHub