TouchSwipe - jQuery plugin for touch devices

TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.

Features

• Detects swipes in 4 directions, "up", "down", "left" and "right"
• Detects pinches "in" and "out"
• Supports single finger or double finger touch events
• Supports click events both on the touchSwipe object and its child objects
• Definable threshold / maxTimeThreshold to determin when a gesture is actually a swipe
• Events triggered for swipe "start","move","end" and "cancel"
• End event can be triggered either on touch release, or as soon as threshold is met
• Allows swiping and page scrolling
• Disables user input elements (Button, form, text etc) from triggering swipes

Source: github.com

1. INCLUDE CSS AND JS FILES

<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.touchSwipe.min.js"></script>

2. HTML

<div id="test" class="box">Swipe me</div>

3. JAVASCRIPT

$(function() {			
	//Enable swiping...
	$("#test").swipe( {
		//Generic swipe handler for all directions
		swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
			$(this).text("You swiped " + direction );	
		},
		//Default is 75px, set to 0 for demo so any distance triggers swipe
	   threshold:0
	});
});

More information at http://labs.rampinteractive.co.uk/touchSwipe/docs/index.html

• Basic swipe
• Single swipe
• Any finger swipe
• Finger swipe
• Swipe status
• Pinch
• Pinch status
• Pinch and Swipe
• Trigger handlers
• Stop propegation
• Handlers and events
• Tap vs swipe
• Hold
• Excluded children
• Page zoom
• Thresholds
• Enable and destroy
• Page scrolling
• Options
• Image gallery example