AAAAA TouchPanView Test
jQuery TouchPanView - jQuery Touch Pan View and Image Zoom Plugin - jQuery Pluginwww.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:
External Zoom Controls:
This example binds some external links to manipulate image zoom.
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!
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".