jQuery 为 jqueryfancybox 灯箱添加滑动效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9785189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add swipe effect for the jquery fancybox lightbox
提问by user168507
Fancybox has a full support and works fine on desktop platforms, however mobile/touch devices don't support the :hoverstate property therefore, if displaying a fancybox gallery like :
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.
and this simple code :
和这个简单的代码：
$(".fancybox").fancybox();
fancybox navigation arrows would need a double-clickto move to the next item, one to show the navigation arrow (:hover) and other to actually advance to the next/prev item.
Fancybox 导航箭头需要双击移动到下一个项目，一个显示导航箭头 ( :hover) 和另一个实际前进到下一个/上一个项目。
The question is : does fancybox have a swipe functionality for ipad, iphone etc. ? If not, how it can be implemented using jQuery?
问题是：fancybox 是否具有适用于 ipad、iphone 等的滑动功能？如果没有，如何使用 jQuery 实现？
采纳答案by TheDeveloper
try following link to .net tutorial: lightbox-responsive
尝试以下链接到 .net 教程： lightbox-responsive
alternative try photo swipe plugin which is really good, find it here
替代尝试照片滑动插件，这真的很好，在这里找到
other options:
其他选项：
swipjs jquery mobile jqtouch
swipjs jquery 移动 jqtouch
回答by notsure
If you want to fully integrate swipe effects to your fancybox you just need to add the following lines to your fancybox.js code::
如果您想将滑动效果完全集成到您的fancybox，您只需要将以下几行添加到您的fancybox.js 代码中：
Copy the code into the _setContentfunction (recommended is on the very end of that function)::
将代码复制到_setContent函数中（推荐在该函数的最后）：
$(F.outer).on('swipeleft', function() {
F.next();
});
$(F.outer).on('swiperight', function() {
F.prev();
});
To make this work you need two lightweight jquery plugins:
要完成这项工作，您需要两个轻量级的 jquery 插件：
http://plugins.jquery.com/event.move/
http://plugins.jquery.com/event.swipe/
http://plugins.jquery.com/event.move/
http://plugins.jquery.com/event.swipe/
That's it. Have fun
就是这样。玩得开心
回答by Hansinger
old question, but perhaps still relevant. I solved it using jQuery UI function called "draggable".
老问题，但也许仍然相关。我使用名为“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();}
}
});
}
});
})
You can watch it here. http://jsfiddle.net/VacTX/4/
你可以在这里观看。 http://jsfiddle.net/VacTX/4/
回答by Tyler Collier
The newest version (currently version 3 beta 1) has swipe support and it works, but hopefully the final release will be much improved. The animation/transition effect is really slow.
最新版本（当前版本 3 beta 1）具有滑动支持并且可以正常工作，但希望最终版本会得到很大改进。动画/过渡效果真的很慢。
