花式框下一个和上一个按钮在移动设备上不起作用

fancybox next and previous buttons not working in mobile

本文关键字：移动 不起作用 按钮 下一个 上一个      更新时间：2023-09-26

我正在我的投资组合网站上工作，我用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）. 使用花哨的框按钮助手，就像这个 https://stackoverflow.com/a/8236090/1055987

helpers: {
    buttons: {}
}
相关文章：