www.consulenza-web.com

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:

Minimal:

beatles

External Zoom Controls:

This example binds some external links to manipulate image zoom.

simpson

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!

aeroporto

ZoomIn | ZoomOut | 1:1 | 0%

This plugin has been tested on:

Documentation

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
$('#myImage').touchPanView({
	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.
easing
boolean Implement smooth deceleration when dragging the map. Default true.
easingReduceSpeed
float Moltiplicatore di rallentamento. 0 = smoother, 1 = strong.
zoom
boolean Implement zoom behavior or not. Default true.
startZoomedOut
boolean Start with the smallest possible zoom. Default false.
protectZoom
boolean Prevent to zoom outside a 0-100 value. Default true.
pins
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.
point
string Posizione di ancoraggio. Default center.
[center|topLeft|topRight|bottomLeft|bottomRight].
href, title, id, css, style
string Html attributes
show
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".