add swipe effect for the jquery fancybox lightbox [closed]

Question

Fancybox has a full support and works fine on desktop platforms, however mobile/touch devices don't support the :hover state property therefore, if displaying a fancybox gallery like :

<a class="fancybox" rel="gallery" href="image01.jpg">01</a>
<a class="fancybox" rel="gallery" href="image02.jpg">02</a>
<a class="fancybox" rel="gallery" href="image03.jpg">03</a>
... etc.

and this simple code :

$(".fancybox").fancybox();

fancybox navigation arrows would need a double-click to move to the next item, one to show the navigation arrow (:hover) and other to actually advance to the next/prev item.

The question is : does fancybox have a swipe functionality for ipad, iphone etc. ? If not, how it can be implemented using jQuery?

Answer 1

If you want to fully integrate swipe effects to your fancybox you just need to add the following lines to your fancybox.js code::

Copy the code into the _setContent function (recommended is on the very end of that function)::

$(F.outer).on('swipeleft', function() {
    F.next();
});
$(F.outer).on('swiperight', function() {
    F.prev();
});

To make this work you need two lightweight jquery plugins:

http://plugins.jquery.com/event.move/
http://plugins.jquery.com/event.swipe/

That's it. Have fun