How to add Touch Events [Swipe Left/ Right] to a image gallery

Question

I have been working on image gallery [html5] and its working fine in desktop version i would like to add touch based events for Ipad/Tablet devices.

Can you please suggest how to add touch based events using javascript/jquery.

Thanks, Srinivas

Answer 1

This jQuery plugin works well. http://www.netcu.de/jquery-touchwipe-iphone-ipad-library Easy to use. Ex:

$('.slideshow').touchwipe({
 wipeLeft: function() {$('.slideshow').cycle('next');},
 wipeRight: function() { $('.slideshow').cycle('prev');},
 min_move_x: 60         
});

Answer 2

You can use this function

swiperight or another direction

// jquery mobile
    $("#id").swiperight(function() {
        //do some with $.mobile.changePage function
    });
    $("#id").swipeleft(function() {
        //do some $.mobile.changePage function
    });

// javascript
document.ontouchmove = function(e) {
    var target = e.currentTarget;
    while(target) {
        if(checkIfElementShouldScroll(target))
            return;
        target = target.parentNode;
    }

    e.preventDefault();
};