为jquery fancybox灯箱添加滑动效果
Fancybox有完全的支持并且在桌面平台上运行良好，但是移动/触摸设备不支持:hover state属性，因此，如果显示如下的fancybox图库：
01 02 03 ... etc.
这个简单的代码：
$(".fancybox").fancybox();
fancybox导航箭头需要双击才能移动到下一个项目，一个用于显示导航箭头（ :hover ），另一个用于实际前进到下一个/ prev项目。
问题是：fancybox是否具有ipad，iphone等的滑动function？ 如果没有，如何使用jQuery实现它？
尝试以下链接到.net教程： 灯箱响应
替代尝试照片刷卡插件这是非常好的， 在这里找到它
其他选择：
swipjs jquery mobile jqtouch
如果要将滑动效果完全集成到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/
而已。 玩得开心
旧的问题，但也许仍然相关。 我使用名为“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/
最新版本（目前版本为3 beta 1）具有刷卡支持并且可以正常工作，但希望最终版本能够得到很大改进。 动画/过渡效果非常慢。