Permalink
Browse files

added swipe support for touch devices

  • Loading branch information...
1 parent 3b2d321 commit ad588311d3f334b6d2967085bc177f53e2a808bd @robflaherty committed May 7, 2011
Showing with 115 additions and 0 deletions.
  1. +1 −0 example/slideshow.html
  2. +14 −0 lib/htmlSlides.js
  3. +96 −0 lib/jquery.jswipe-0.1.2.js
  4. +4 −0 readme.md
View
@@ -114,6 +114,7 @@
</div>
<!-- /deck -->
<script src="../lib/jquery-1.5.2.min.js"></script>
+ <script src="../lib/jquery.jswipe-0.1.2.js"></script>
<script src="../lib/htmlSlides.js"></script>
<script>
//Do our business when the DOM is ready for us
View
@@ -73,6 +73,20 @@ var htmlSlides = {
//Ensure focus stays on window and not embedded iframes/objects
$(window).load(function() {
this.focus();
+ });
+
+ //Swipe gestures
+ $('.slide').swipe({
+ threshold: {
+ x: 20,
+ y: 30
+ },
+ swipeLeft: function() {
+ base.showActions.apply(base);
+ },
+ swipeRight: function() {
+ base.prevSlide.apply(base);
+ },
});
},
View
@@ -0,0 +1,96 @@
+/*
+ * jSwipe - jQuery Plugin
+ * http://plugins.jquery.com/project/swipe
+ * http://www.ryanscherf.com/demos/swipe/
+ *
+ * Copyright (c) 2009 Ryan Scherf (www.ryanscherf.com)
+ * Licensed under the MIT license
+ *
+ * $Date: 2009-07-14 (Tue, 14 Jul 2009) $
+ * $version: 0.1.2
+ *
+ * This jQuery plugin will only run on devices running Mobile Safari
+ * on iPhone or iPod Touch devices running iPhone OS 2.0 or later.
+ * http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
+ */
+(function($) {
+ $.fn.swipe = function(options) {
+
+ // Default thresholds & swipe functions
+ var defaults = {
+ threshold: {
+ x: 30,
+ y: 10
+ },
+ swipeLeft: function() { alert('swiped left') },
+ swipeRight: function() { alert('swiped right') }
+ };
+
+ var options = $.extend(defaults, options);
+
+ if (!this) return false;
+
+ return this.each(function() {
+
+ var me = $(this)
+
+ // Private variables for each element
+ var originalCoord = { x: 0, y: 0 }
+ var finalCoord = { x: 0, y: 0 }
+
+ // Screen touched, store the original coordinate
+ function touchStart(event) {
+ //console.log('Starting swipe gesture...')
+ originalCoord.x = event.targetTouches[0].pageX
+ originalCoord.y = event.targetTouches[0].pageY
+ }
+
+ // Store coordinates as finger is swiping
+ function touchMove(event) {
+ event.preventDefault();
+ finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
+ finalCoord.y = event.targetTouches[0].pageY
+ }
+
+ // Done Swiping
+ // Swipe should only be on X axis, ignore if swipe on Y axis
+ // Calculate if the swipe was left or right
+ function touchEnd(event) {
+ //console.log('Ending swipe gesture...')
+ var changeY = originalCoord.y - finalCoord.y
+ if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
+ changeX = originalCoord.x - finalCoord.x
+
+ if(changeX > defaults.threshold.x) {
+ defaults.swipeLeft()
+ }
+ if(changeX < (defaults.threshold.x*-1)) {
+ defaults.swipeRight()
+ }
+ }
+ }
+
+ // Swipe was started
+ function touchStart(event) {
+ //console.log('Starting swipe gesture...')
+ originalCoord.x = event.targetTouches[0].pageX
+ originalCoord.y = event.targetTouches[0].pageY
+
+ finalCoord.x = originalCoord.x
+ finalCoord.y = originalCoord.y
+ }
+
+ // Swipe was canceled
+ function touchCancel(event) {
+ //console.log('Canceling swipe gesture...')
+ }
+
+ // Add gestures to all swipable areas
+ this.addEventListener("touchstart", touchStart, false);
+ this.addEventListener("touchmove", touchMove, false);
+ this.addEventListener("touchend", touchEnd, false);
+ this.addEventListener("touchcancel", touchCancel, false);
+
+ });
+ };
+})(jQuery);
View
@@ -30,6 +30,10 @@ $('html').bind('newSlide', function(e, id) {
}
});
```
+## Changelog
+05/07/2011 - Added swipe support for touch devices
+
+05/01/2011 - Reorganized file structure
## Demo
[View the demo](http://www.ravelrumba.com/code/demos/html-slideshow/slideshow.html)

0 comments on commit ad58831

Please sign in to comment.