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

try following link to .net tutorial: lightbox-responsive

alternative try photo swipe plugin which is really good, find it here

other options:

swipjs jquery mobile jqtouch

Answer 2

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

Answer 3

old question, but perhaps still relevant. I solved it using jQuery UI function called "draggable".

$(function(){
    $('.fancybox').fancybox({
        padding : 0,
        arrows: false,
        helpers : {
            thumbs : {
                width  : 150,
                height : 50
            }
        },
        onUpdate:function(){
            $('#fancybox-thumbs ul').draggable({
                axis: "x"
            });
            var posXY = '';
            $('.fancybox-skin').draggable({
                axis: "x",
                drag: function(event,ui){
                    // get position
                    posXY = ui.position.left;

              // if drag distance bigger than +- 100px: cancel drag function..
                    if(posXY > 100){return false;}
                    if(posXY < -100){return false;}
                },
                stop: function(){

              // ... and get next or previous image
                    if(posXY > 95){$.fancybox.prev();}
                    if(posXY < -95){$.fancybox.next();}
                }
            });
        }
     });
})

You can watch it here. http://jsfiddle.net/VacTX/4/

Answer 4

The newest version (currently version 3 beta 1) has swipe support and it works, but hopefully the final release will be much improved. The animation/transition effect is really slow.

http://fancyapps.com/fancybox/beta/