Advertisement
iamdangavin

jQuery Touchwipe

Jul 7th, 2011
489
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
  3.  * Common usage: wipe images (left and right to show the previous or next image)
  4.  *
  5.  * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
  6.  * @version 1.1.1 (9th December 2010) - fix bug (older IE's had problems)
  7.  * @version 1.1 (1st September 2010) - support wipe up and wipe down
  8.  * @version 1.0 (15th July 2010)
  9.  */
  10. (function($) {
  11.    $.fn.touchwipe = function(settings) {
  12.      var config = {
  13.             min_move_x: 20,
  14.             min_move_y: 20,
  15.             wipeLeft: function() { },
  16.             wipeRight: function() { },
  17.             wipeUp: function() { },
  18.             wipeDown: function() { },
  19.             preventDefaultEvents: true
  20.      };
  21.      
  22.      if (settings) $.extend(config, settings);
  23.  
  24.      this.each(function() {
  25.          var startX;
  26.          var startY;
  27.          var isMoving = false;
  28.  
  29.          function cancelTouch() {
  30.              this.removeEventListener('touchmove', onTouchMove);
  31.              startX = null;
  32.              isMoving = false;
  33.          } 
  34.          
  35.          function onTouchMove(e) {
  36.              if(config.preventDefaultEvents) {
  37.                  e.preventDefault();
  38.              }
  39.              if(isMoving) {
  40.                  var x = e.touches[0].pageX;
  41.                  var y = e.touches[0].pageY;
  42.                  var dx = startX - x;
  43.                  var dy = startY - y;
  44.                  if(Math.abs(dx) >= config.min_move_x) {
  45.                     cancelTouch();
  46.                     if(dx > 0) {
  47.                         config.wipeLeft();
  48.                     }
  49.                     else {
  50.                         config.wipeRight();
  51.                     }
  52.                  }
  53.                  else if(Math.abs(dy) >= config.min_move_y) {
  54.                         cancelTouch();
  55.                         if(dy > 0) {
  56.                             config.wipeDown();
  57.                         }
  58.                         else {
  59.                             config.wipeUp();
  60.                         }
  61.                      }
  62.              }
  63.          }
  64.          
  65.          function onTouchStart(e)
  66.          {
  67.              if (e.touches.length == 1) {
  68.                  startX = e.touches[0].pageX;
  69.                  startY = e.touches[0].pageY;
  70.                  isMoving = true;
  71.                  this.addEventListener('touchmove', onTouchMove, false);
  72.              }
  73.          }       
  74.          if ('ontouchstart' in document.documentElement) {
  75.              this.addEventListener('touchstart', onTouchStart, false);
  76.          }
  77.      });
  78.  
  79.      return this;
  80.    };
  81.  
  82.  })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement