为jquery fancybox灯箱添加滑动效果[关闭]

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

老问题，但也许仍然相关。我使用称为“可拖动”的 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手机 jqtouch

Answer 4

最新版本（目前是版本 3 beta 1）支持滑动，并且可以正常工作，但希望最终版本会有很大改进。动画/过渡效果真的很慢。

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