agregar efecto de barrido para la caja de luz jquery fancybox

Fancybox tiene un soporte completo y funciona bien en plataformas de escritorio, sin embargo, los dispositivos móviles / táctiles no son compatibles con la propiedad del estado de ” :hover , por lo tanto, si se muestra una galería de fancybox como:

 01 02 03 ... etc. 

y este código simple:

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

Las flechas de navegación de fancybox necesitarían un doble clic para pasar al siguiente elemento, uno para mostrar la flecha de navegación ( :hover ) y otro para avanzar al elemento siguiente / anterior.

La pregunta es: ¿fancybox tiene una funcionalidad de barrido para ipad, iphone, etc.? Si no, ¿cómo se puede implementar usando jQuery?

intente el siguiente enlace al tutorial .net: lightbox-responsive

Alternativa, pruebe el complemento de deslizar fotos, que es realmente bueno, encuéntrelo aquí.

otras opciones:

swipjs jquery mobile jqtouch

Si desea integrar completamente los efectos de deslizamiento en su fancybox, solo necesita agregar las siguientes líneas a su código de fancybox.js:

Copie el código en la función _setContent (se recomienda al final de esa función) ::

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

Para hacer este trabajo necesitas dos complementos de jQuery ligeros:

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

Eso es. Que te diviertas

Pregunta antigua, pero quizás aún relevante. Lo resolví usando la función jQuery UI llamada “arrastrable”.

 $(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();} } }); } }); }) 

Puedes verlo aqui. http://jsfiddle.net/VacTX/4/

La versión más reciente (actualmente la versión 3 beta 1) tiene soporte de swipe y funciona, pero esperamos que la versión final sea mucho mejor. El efecto de animación / transición es muy lento.

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