add swipe effect for the jquery fancybox lightbox

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?

Solution 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

Solution 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

Solution 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/

Solution 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/

View more solutions

Comments

[Admin]

I was looking to accomplish the same thing, found this modified code on Github: https://github.com/rytikovCode/fancyBox Also, I'm new to answering on Stack Overflow, if I messed something up, my bad...

[jdepypere]

Is there any way to have the regular next/prev buttons appear on dekstop, and the draggable one when on mobile? Also, when you don't drag far enough and let go, it doesn't return to it's original position.

[Hansinger]

Hi @arbitter , you can put a " $(this).animate({left: 0}, 500)" in the stop function for the draggable function to move the image to the original position. For the next/prev buttons its tricky. you have to detect the mobile / desktop device and change the arrows option for that. the "moveback" function you can show on my updated fiddle.. jsfiddle.net/VacTX/20 for the mobile device detection i found here something interesting.. github.com/miohtama/detectmobile.js but i dont test it.

[Dave]

I put this at the end of the _setDimension function and it worked perfectly, thanks for the tip, those are great plugins

[fdrv]

This is not work on mobile an pads, just lose time to chekc it.

[fdrv]

Why you writed this if u dont checked, bc i cheked and IT IS NOT WORK on pads AND mobiles devisec!

[fdrv]

sry but it not work =(

[fdrv]

But it really great add some like swipe for desktop mouse event =) Ty.

[user3180105]

v3 works well. Jek-fdrv has no idea what (s)he's talking about

[Matt]

The _setContent function doesn't seem to exist anymore (I'm using version 2.1.5), but putting the code at the end of the _setDimension function, as mentioned above, does work. Nice simple solution, thanks :)

[Teknotica]

Thanks for this! really helpful!

[chocolata]

Works like a charm! Tried and tested with version 2.1.5 of Fancybox!

[Marvin3]

+ to PhotoSwipe, new version is really good and even supports zoom gestures.

[Ollie]

@Hansinger This would be perfect, but unfortunately doesn't work on mobile and iPad... any idea what I'd need to do to make it work on mobile?

[Hansinger]

@Ollie i do not use fancybox anymore. i change to another library called photoswipe. It has a better mobile and touch support and looks very nice. You can take a look at photoswipe.com

[Severe Torture]

It works for me! BUT I need change added code to fancybox.js to: " $(".fancybox-wrap").on('swipeleft', function() { F.next(); }); $(".fancybox-wrap").on('swiperight', function() { F.prev(); }); "

[Kairat Jenishev]

Actually, you can do like this: $('fancybox').fancybox({afterLoad: function () { $('.fancybox-outer').on('swipeleft', function () { $.fancybox.next(); }).on('swiperight', function () { $.fancybox.prev(); }); }})

[Mohamed Anis Dahmani]

The first link is no longer working here is the right one: Responsive HTML5 Lightbox