为jquery fancybox灯箱添加滑动效果

Question

Fancybox有完全支持并且在桌面平台上运行良好,但是移动/触摸设备:hover 因此不支持state属性,如果显示如下的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),另一个用于实际前进到下一个/ prev项目.

问题是: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

另一种尝试照片滑动插件，这真的很好，在这里找到它

其他选项：

swipjs jquery 移动 jqtouch