fancybox следующие и предыдущие кнопки, не работающие на мобильном телефоне

Question

Я работаю над своим веб-сайтом 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 кнопки. Я не думаю, что это было бы связано с этим, правда?

Если есть кто-нибудь, кто мог бы знать, как исправить это, я был бы очень признателен за помощь!

Спасибо!

Answer 1

Проблема в том, что сенсорные устройства не поддерживают :hover состояние, так что я думаю, что у вас есть 3 варианта:

1). Сделать стрелки постоянно видны как в https://stackoverflow.com/a/8672001/1055987

.fancybox-nav span { 
visibility: visible; 
} 

2). Внедрите метод swiping с помощью jQuery-UI, который можно перетащить, как в этом http://jsfiddle.net/VacTX/4/ (возник вопрос, который, к сожалению, был удален модератором, позор) ... Мне очень нравится этот метод, но он немного сложнее.

3). Используйте помощники кнопки fancybox, например, в этом https://stackoverflow.com/a/8236090/1055987

helpers: { 
    buttons: {} 
}