我正在使用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>
我没有更改css
下载附带的任何默认fancybox
,但我确实自定义了关闭和nav
按钮。我不认为这与它有什么关系,不是吗?
如果有人可能知道如何解决这个问题,我将非常感谢您的帮助!
谢谢!
答案 0 :(得分:1)
问题是因为触控设备不支持:hover
状态,因此我认为您有3种选择:
1)。像https://stackoverflow.com/a/8672001/1055987
一样使箭头永久可见.fancybox-nav span {
visibility: visible;
}
2)。使用jQuery-UI的拖拽方法实现一个滑动方法,就像在这个http://jsfiddle.net/VacTX/4/中一样(有一个问题很遗憾被主持人删除了,很遗憾)......我真的很喜欢这种方法,但它有点复杂。
3)。使用此https://stackoverflow.com/a/8236090/1055987
中的fancybox按钮帮助程序helpers: {
buttons: {}
}