AAAAA TouchPanView Test

jQuery TouchPanView - jQuery Touch Pan View and Image Zoom Plugin - jQuery Plugin

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

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:

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