jquery - 为 jquery fancybox 灯箱添加滑动效果

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果。另请参阅:Stack Overflow question checklist

已关闭10 年前。

Improve this 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/

就是这样。玩得开心