Add jQuery fancybox lightbox swipe effect

Question

Fancybox has full support and works great on desktop platforms, however mobile / touch devices do not support the state property :hover , so if you see a fancybox gallery, for example:

 <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 will require a double click to go to the next element to show the navigation arrow ( :hover ) and others to go to the next / previous element.

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

Answer 1

try using the following link :. lightbox-responsive

an alternative trial plugin for photoshop that is really good, find it here

other parameters:

swipjs jQuery mobile jqtouch

Answer 2

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

Copy the code into the _setContent function (recommended at the very end of this function):

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

To do this, you will need two lightweight jquery plugins:

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

What is it. Enjoy

Answer 3

an old question, but perhaps still relevant. I solved this using a 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) supports wipes and works, but hopefully the final version will be greatly improved. The animation / transition effect is very slow.

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