Home > DeveloperSection > Forums > How to add swipe feature to a image gallery?
Brad Pitt
Brad Pitt

Total Post:61

Points:429
Posted on    December-31-2014 11:23 PM

 JQuery JQuery  JavaScript 
Ratings:


 1 Reply(s)
 862  View(s)
Rate this:
I have an image gallery and I want to add swipe feature to it,next and prev big image. I don't want to use any pluggin. I have some code, I tried some but I was unable to make it work. Any advice is highly appreciated.

$(document).on("pagecreate","#pageone",function(){
 $("img").on("swipeleft",function(){
    console.log("Left");
  }); 

 $("img").on("swiperight",function(){
    console.log("Right");
  });                          
});

Jsfiddle

Thanks!


Norman Reedus
Norman Reedus

Total Post:45

Points:315
Posted on    December-31-2014 11:34 PM

the swipeleft event listener is not available with only jQuery. You can use jQuery Mobile, or craft your own using the touchstart, touchmove, and touchend. Assuming you only want to execute something once, the following code should do:


var swiping = false;


$('#div').on('touchmove', function (event) {

  swiping = true;

})



$('#div').on('touchstart', function (event) {

  setTimeout(function() {

    if ( swiping = true ) {

      console.log('swiping');

    }

  }, 50)

})

The setTimeout likely isn't necessary since touchmove begins at the same time as touchstart - but I left it there in case any given browser performs differently.


Don't want to miss updates? Please click the below button!

Follow MindStick