jQuery TouchPanView

This jQuery plugin apply a "pan navigation behavior" to any big images in both desktop (yes, IE compliant!) and mobile devices.
With just one image and one jQuery method you can obtain:



External Zoom Controls:

This example binds some external links to manipulate image zoom.


ZoomIn | ZoomOut | 1:1 | 0%

Map with pins:

This example implements a number of pins to display links on map.
The map starts zoomed out but some pins appear only after zooming the map!


ZoomIn | ZoomOut | 1:1 | 0%

This plugin has been tested on:


To implement a touch pan view into your page you need a big image, jQuery and a simple code configuration object as explained in this example:

<!-- DOM Image. -->
<img id="myImage" src="myBigImage.jpg" />

// Document OnReady stuff
	width: 600,
	height: 300

You can configure a lot of attributes to accomplish what you need. Keep on reading to learn about it!

width, height
integer Define viewport's dimension in px. Default 100x100.
boolean Implement smooth deceleration when dragging the map. Default true.
float Moltiplicatore di rallentamento. 0 = smoother, 1 = strong.
boolean Implement zoom behavior or not. Default true.
boolean Start with the smallest possible zoom. Default false.
boolean Prevent to zoom outside a 0-100 value. Default true.
array List of touchable links on map. Each item can be configured as explained later.

Pin Configuration:

x, y
integer Pin position in percentage.
w, h
integer Pin dimensions (px), Default 36x36 px.
string Posizione di ancoraggio. Default center.
href, title, id, css, style
string Html attributes
string Link's HTML.
click, mouseover, mouseout
function Callback on pin click. Receive pin configuration in this. You can find DOM reference in "this.dom".