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:

• an active image pan panel to surf the image
• drag to navigate with your mouse on desktop
• swipe to navigate with your fingers on mobile devices
• bind external controls to zoom-in zoom-out the image
• pinch to zoom with your fingers on mobile devices
• double click or tap to activate detail view and panoramic view

This plugin has been tested on:

• Mac
  • Firefox 8
  • Safari 5.1.2
  • Chrome 16
  • Opera 11
• Mobile
  • iPad
  • iPhone
• Windows
  • IE9
  • IE8
  • IE7
  • IE6

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".