Add Swipe to Drupal Views Slideshow and jQuery Cycle

gistfile1.js

Drupal.settings.isTouchDevice = function() {
	return "ontouchstart" in window;
}

if ( Drupal.settings.isTouchDevice() ) {
	Drupal.behaviors.jQueryMobileSlideShowTouchAdvance = {
		attach: function(context, settings) {
			self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
				jQuery.each(jQuery(".views_slideshow_cycle_main.viewsSlideshowCycle-processed"), function(idx, value) {
					value.addEventListener("touchstart", self.handleTouchStart);
					jQuery(value).addClass("views-slideshow-mobile-processed");
				})
				jQuery(self).bind("swipe", self.handleSwipe);
		},
		detach: function() { }, original: { x: 0, y: 0}, 
		changed: { x: 0, y: 0}, direction: { x: "", y: "" }, fired: false,
		handleTouchStart: function(evt) {
			self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
			if (evt.touches) {
				if (evt.targetTouches.length != 1) { return false; } // don't respond to gestures
				if (evt.touches.length) { evt.preventDefault(); evt.stopPropagation() }
				self.original = { x: evt.touches[0].clientX, y: evt.touches[0].clientY }
				self.target = jQuery(this).attr("id").replace("views_slideshow_cycle_main_", "");
				Drupal.viewsSlideshow.action({ "action": "pause", "slideshowID": self.target });
				evt.target.addEventListener("touchmove", self.handleTouchMove);
				evt.target.addEventListener("touchend", self.handleTouchEnd);
			}
		},
		handleTouchMove: function(evt) {
			self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
			self.changed = {
                   x: (evt.touches.length) ? evt.touches[0].clientX: evt.changedTouches[0].clientX,
                   y: (evt.touches.length) ? evt.touches[0].clientY: evt.changedTouches[0].clientY
               };
			h = parseInt(self.original.x - self.changed.x), v = parseInt(self.original.y - self.changed.y);
			if (h !== 0) { self.direction.x = (h < 0) ? "right":"left"; }
			if (v !== 0) { self.direction.y = (v < 0) ? "up": "down"; }
		        if ((h+v) != 0) {
				jQuery(self).trigger("swipe");
			}
		},
		handleTouchEnd: function(evt) {
			self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
			evt.target.removeEventListener("touchmove", self.handleTouchMove);
			evt.target.removeEventListener("touchend", self.handleTouchEnd);
			self.fired = false;
		},
		handleSwipe: function(evt) {
			self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
			if (evt != undefined && self.fired == false) {
				Drupal.viewsSlideshow.action({ "action":  (self.direction.x == "left")?"nextSlide":"previousSlide", "slideshowID": self.target });
				self.fired = true; //only fire advance once per touch
			}
		}
	}
}

Thanks a lot for this! Works great. I would love a click event as well. This might not fit in with the swipe/portable code, but still nice to have for browsers. Anyone knows a code for that?

To add a click event, we added the following to the line after evt.target.removeEventListener("touchend", self.handleTouchEnd); (but, before the self.fired=false;)

if (!self.fired) {
            if(jQuery(this).parents(".views_slideshow_cycle_slide").length > 0) {
            var link = jQuery(this).parents(".views_slideshow_cycle_slide").find("a").attr("href");
            if (link.length > 0) document.location.href = link;
            }
        }

I am trying to stop the script from changing slides when swippping up and down, does anyone have the answer for that?

Thanks,

I'm sorta guessing here, but if you want to disable the vertical swipe, it looks like you could just comment out the line:

y: (evt.touches.length) ? evt.touches[0].clientY: evt.changedTouches[0].clientY

in the handleTouchMove function.

HI, thanx, working, but scrivenerb solution for disabling vertical swipe is not working for me, any idea? Thank you..

It didn't work for us either. :-/

I've modify a bit the js to:

• Allow a distance between the start and end points.
• Avoid the usage of preventDefault and StopPropagation to allow native slideshow behaviour (eg. click).
• Avoid vertical swipe to allow default device scrolling.

  /** Swipe behavior for Views Slideshows. */
  Drupal.settings.isTouchDevice = function() {
    return "ontouchstart" in window;
  }

  if ( Drupal.settings.isTouchDevice() ) {
    Drupal.behaviors.jQueryMobileSlideShowTouchAdvance = {
      attach: function(context, settings) {
        self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
          jQuery.each(jQuery(".views_slideshow_cycle_main.viewsSlideshowCycle-processed"), function(idx, value) {
            value.addEventListener("touchstart", self.handleTouchStart);
            jQuery(value).addClass("views-slideshow-mobile-processed");
          })
          jQuery(self).bind("swipe", self.handleSwipe);
      },
      detach: function() { },
      original: { x: 0, y: 0},
      changed: { x: 0, y: 0},
      direction: { x: "", y: "" },
      fired: false,
      ratio: 25,
      handleTouchStart: function(evt) {
        self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
        if (evt.touches) {
          if (evt.targetTouches.length != 1) { return false; } // don't respond to gestures
          self.original = { x: evt.touches[0].clientX, y: evt.touches[0].clientY }
          self.target = jQuery(this).attr("id").replace("views_slideshow_cycle_main_", "");
          Drupal.viewsSlideshow.action({ "action": "pause", "slideshowID": self.target });
          evt.target.addEventListener("touchmove", self.handleTouchMove);
          evt.target.addEventListener("touchend", self.handleTouchEnd);
        }
      },
      handleTouchMove: function(evt) {
        self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
        self.changed = {
          x: (evt.touches.length) ? evt.touches[0].clientX: evt.changedTouches[0].clientX,
          y: (evt.touches.length) ? evt.touches[0].clientY: evt.changedTouches[0].clientY
        };
        h = parseInt(self.original.x - self.changed.x),
        v = parseInt(self.original.y - self.changed.y);
        if (h !== 0) { self.direction.x = (h < self.ratio) ? "right":"left"; }
        if (v !== 0) { self.direction.y = (v < self.ratio) ? "up": "down"; }

        if (h > self.ratio || h < self.ratio*-1) {
          jQuery(self).trigger("swipe");
        }
      },
      handleTouchEnd: function(evt) {
        self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
        evt.target.removeEventListener("touchmove", self.handleTouchMove);
        evt.target.removeEventListener("touchend", self.handleTouchEnd);
        self.fired = false;
      },
      handleSwipe: function(evt) {
        self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
        if (evt != undefined && self.fired == false) {
          Drupal.viewsSlideshow.action({ "action":  (self.direction.x == "left")?"nextSlide":"previousSlide", "slideshowID": self.target });
          self.fired = true; //only fire advance once per touch
        }
      }
    }
  }

You could modify the "ratio" property to extend or contract the distance.
Hope this helps somebody. :)

You can integrate touch or swipe control by integrating a simple JS plugin and activating a "click" on the controls. Here's a tutorial to Drupal touch slider or swiper with Views Slideshow. It's only a few lines of code.

Replace lines
self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
by
var self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;.
Overwise the global Variable self is changed which usually refers to the browser window, which may break other JavaScript code. In my case it broke JavaScript code from module ShareThis.

Works well, thanks!