fancybox下一個和上一個按鈕在移動設備中不起作用

Question

我正在我的投資組合網站上工作，並且使用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 ，但是我確實自定義了close和nav按鈕。 我認為這與它無關，是嗎？

如果有人知道如何解決此問題，我將非常感謝您的幫助！

謝謝！

Answer 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: {}
}