How to add swipe event to my flickr image in jquery (intel xdk)(hybrid application)

I am developing hybrid application by using intel xdk and jquery mobile for UI. I have list of flickr photos with thumpnail view. If i click any photos, my photo will pop up some big size, But i want to swipe through all images.how to add swipe event in my photos

This is my html code
Here i am appending my flickr image to this div tag

<div id="images" class="photolist"></div>

If i click any image from list, it will popup my image. for that i am using this code

Html

 <div id="photopop" data-transition="pop" data-role="popup" data-overlay-theme="b" data-theme="b" data-corners="false">       
     <img class="popphoto" src="" id="swipeimage"  style="width:300px;height:300px;"/> 
  </div> 

I am getting source of the flickr image and set to my above img tag by using this code

JS code

  $(document).on("click", "#images img", function() 
      { 
          imgsrc = $(this).attr("src"); 
          $(".popphoto").attr("src", imgsrc)
          $("#photopop").popup("open");  
       });

If you want to see my output just check it,Here i am giving image source statically https://jsfiddle.net/mvjb5936/

Now I want to swipe all images

$("#swipeimage").on("swipeleft",function(){

       alert('left');  

});

 $("#swipeimage").on("swiperight",function(){

     alert('right');      

 });

In above if i swipe left my left alert will display as well as my right alert also will display when i swipe right side, How to give my image source into my swipe function


Source: html5

Leave a Reply