Question

Fancybox完全支持并且在桌面平台上运行良好，但是移动/触摸设备不支持:hover状态属性，因此，如果显示如下的fancybox图库：

<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.

这个简单的代码：

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

fancybox导航箭头需要双击才能移动到下一个项目，一个用于显示导航箭头（:hover），另一个用于实际前进到下一个/上一个项目

问题是：fancybox是否具有ipad，iphone等的滑动功能？如果没有，如何使用jQuery实现它？

Answer 1

如果要将滑动效果完全集成到fancybox中，只需将以下行添加到fancybox.js代码::

将代码复制到_setContent函数中（建议在该函数的最后）::

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

要完成这项工作，您需要两个轻量级的jquery插件：

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

就是这样。玩得开心

Answer 2

老问题，但也许仍然相关。我使用名为“draggable”的jQuery UI函数解决了它。

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

你可以在这里观看。 http://jsfiddle.net/VacTX/4/

Answer 3

尝试以下链接到.net教程：lightbox-responsive

替代尝试照片滑动插件非常好，find it here

其他选择：

swipjs jquery mobile jqtouch

Answer 4

最新版本（目前版本为3 beta 1）具有滑动支持并且可以正常工作，但希望最终版本能够得到很大改进。动画/过渡效果非常慢。

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

为jquery fancybox灯箱添加滑动效果

4 个答案: