add swipe effect for the jquery fancybox lightbox [closed]

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

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 3

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/

Answer 4

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