我正在处理我的 portfolio网站,我使用 Fancybox 2
来展示一些作品集。在 Firefox、Safari 和 Chrome 的桌面上,一切都运行得很好,但由于某种原因,在移动设备 (iPhone) 上,下一个和上一个按钮不起作用,图像变小并稍微向右跳动。关闭按钮工作得很好。
这是我的 JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'transitionIn': 'fade',
'transitionOut': 'fade',
'speedIn': 600,
'speedOut': 200,
'overlayShow': true,
margin: [60, 60, 50, 60] // top, right, bottom, left
});
});</script>
我没有更改 fancybox
下载附带的任何默认 css
,但我确实自定义了关闭和 nav
按钮。我不认为这与它有任何关系,不是吗?
如果有人知道如何解决这个问题,我将非常感谢您的帮助!
谢谢!
最佳答案
问题是因为触摸设备不支持 :hover
状态,所以我认为您有 3 个选择:
1).使箭头永久可见,如https://stackoverflow.com/a/8672001/1055987
.fancybox-nav span {
visibility: visible;
}
2).使用 jQuery-UI 的可拖动功能实现滑动方法,如 http://jsfiddle.net/VacTX/4/ 所示(有一个问题不幸被版主删除了,耻辱)...我真的很喜欢这个方法,虽然它有点复杂。
3).使用 fancybox 按钮助手,如 https://stackoverflow.com/a/8236090/1055987
helpers: {
buttons: {}
}
关于javascript - fancybox 下一个和上一个按钮在移动设备中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18710493/