jQuery addSwipe Plugin

With this plugin you can add swipe action to a layer, and render actions for the left and right swipe move gesture. Works with mouse and touchscreen uniformly. You can also set it up to snap to grid, e.g. window width or a fraction of the width.

Syntax

$(layer).addSwipe( leftFn, rightFn, { options } );

• leftFn the function to be called on left swipe event
• rightFn the function to be called on right swipe event

options

• minDist minimum distance in pixels that is to be treated as swipe (default = 40)
• snapGrid the grid to snap, 1 means snap to whole width, 2: half width (default = 0, no snap)
• keepWithin the content is not allowed go off the window (default = true)

methods

• unswipe detach the swipe functionality from the element
• resetswipe moves the layer to the starting position

Demo

http://lazaworx.com/static/addswipe-plugin/sample.html

Usage

<script src="addswipe.js"></script>
<script>
	$(document).ready(function() {
		// Rendering functions to left and right swipe events
		$('#content').addSwipe(function() {
			$('h3').text("Swiped left!");
		}, function() {
			$('h3').text("Swiped right!");
		}, {
		// Snapping to grid of size equals to the container's
			snapGrid: 1,
		});
		// Triggering the 'resetswipe' method
		$('button').click(function() {
			$('#content').trigger('resetswipe');
		});
	});
</script>

Requirements

jQuery 1.7 or higher

License

Available for use in all personal or commercial projects under both MIT and GPL licenses.

Copyright (c) 2012 Molnar Laszlo