Swipe with JQuery Mobile

[UnaOmnia]

I cannot detect swipe on any of the elements...

$('.ekko-lightbox *').swiperight(function() {
alert('ekko swiped');
$('.ekko-lightbox-nav-overlay .glyphicon-chevron-left').trigger("click");
});

$('.ekko-lightbox *').swipeleft(function() {
alert('ekko swiped');
$('.ekko-lightbox-nav-overlay .glyphicon-chevron-right').trigger("click");
});
`

[UnaOmnia]

I figured out a way to do it (remove the extra spaces around the div ("< div"):

$(this).ekkoLightbox({

onContentLoaded: function() {

$("< div class="lightbox-swipe" >< /div >").appendTo('body').show();
		
  $('.lightbox-swipe').swiperight(function() {  
  $('.ekko-lightbox-nav-overlay .glyphicon-chevron-left').trigger("click");
});  

$('.lightbox-swipe').swipeleft(function() {
$('.ekko-lightbox-nav-overlay .glyphicon-chevron-right').trigger("click");
});

}

});

[UnaOmnia]

No that only worked on Desktop... either that or my cache on my phone is stuck...

[UnaOmnia]

weird.. worked on phone with wifi turned on.. must be caching somewhere..

[ashleydw]

Swipe is already built in, see _swipeGesure in the main JS file

[UnaOmnia]

Thank you for the fast response - that is SUPER cool.

Can I detect left and right swipe? Can you put a little more detail in the answer like a left an right swipe function with alert I could add to my javascript (not the ekko lightbox js) ?

I am using the 4.0.2 tree for Bootstrap 3 (I think that's why I have to use 4.0.2 can't remember which of your support comments said it but one said I needed 4.0.2 to make it work)

HOWEVER the solution I have works. OnContentLoaded I add a div to the body and position it fixed with the highest z-index so it is invisible and sits over the lightbox, and then I put the swipe on that.

It works. Just had to wait for the server to propagate the changes or something to clear cache. When I woke up today my solution worked.

So I am interested in your idea, but my solution works. I need JQuery Mobile Swipe for my other bootstrap carousels anyway. So, its not like its going anywhere.

http://davidgallo.unaomnia.com/category/concerts-and-events/

Here is what I am working on.. I also added custom buttons.

I just noticed my method covers the video though. So I am working on a way to handle that.. Have to get a cover behind the video..

Maybe your method would be better... I will wait to hear back and search around in the JS

[UnaOmnia]

My gosh I am sorry. I tried once more to target .ekko-lightbox for the JQuery Mobile swipeleft and swiperight functions and it worked.

http://davidgallo.unaomnia.com/category/concerts-and-events/

So now I have swipe, and can click the video to play it, and I also have custom buttons. Those are absolute positioned inside .ekko-lightbox wrapper div.

Was still hoping to get swipe to work if they went over where the video was... It works on the backdrop and on the images, but not if the swipe across the area with the video in it. But at least they can play. When they fullscreen Youtube and exit it stays in the lightbox, but when they do the same in a Vimeo video it closes the lightbox.

function dgEkkoLoad(){
	$(document).on('click', '[data-toggle="lightbox"]', function(event) {
		
		
  
            event.preventDefault();
            $(this).ekkoLightbox({ onContentLoaded: function() {
				
			
  
		
  var imgh = $(".ekko-lightbox-container").find("img").height();
  var winh = $(window).height();
  if ((imgh+0)>winh)
  {
    $(".ekko-lightbox-container").find("img").css("height",winh-50).css("width","auto").css("margin","0 auto");
  }
  
  var navForEkko = '<div class="dg-ekko-prev"></div><div class="dg-ekko-next"></div><div class="dg-ekko-close">Close</div>';
		if(!$('.ekko-lightbox').hasClass('hasButtons')){
		$(navForEkko).appendTo('.ekko-lightbox');	

$('.ekko-lightbox').addClass('hasButtons');
$('.dg-ekko-prev').on('click', function(){
$('.ekko-lightbox-nav-overlay .glyphicon-chevron-left').trigger("click");
});

		$('.dg-ekko-next').on('click', function(){
			$('.ekko-lightbox-nav-overlay .glyphicon-chevron-right').trigger("click");
		});
		
		$('.dg-ekko-close').on('click', function(){
			$('.ekko-lightbox .close').trigger("click");
		});
		
		
  $('.ekko-lightbox, .embed-responsive iframe').swiperight(function() {  

  $('.ekko-lightbox-nav-overlay .glyphicon-chevron-left').trigger("click");
});  

$('.ekko-lightbox, .embed-responsive iframe').swipeleft(function() {

  $('.ekko-lightbox-nav-overlay .glyphicon-chevron-right').trigger("click");

});

		}
		
	
  
  
  
  
}
});
        });
	
}
dgEkkoLoad();