FancyBox: iPAD требуется DoubleClick для перехода к следующему изображению

Question

У меня есть несколько галерей на http://rockcitybless.com, которые прекрасно работают в IE, Chrome и настольных версиях Safari, Firefox и других.

Но на iPad первый клик (слева или справа от изображения) отображает стрелку, и только второй клик продвигает изображение. мне нужно сначала нажмите, чтобы перейти к следующему изображению.

Я прочитал пост, рассказывающий об этой же проблеме в Safari, и исправление было чтобы убедиться, что теги <a> были закрыты.

Мои <a> теги закрыты (</a>) и имеют незакрытый тег <img> внутри Это. Теги генерируются с помощью вызовов ajax (если это имеет значение).

FancyBox в остальном ИДЕАЛЬНЫЙ!

Answer 1

Кажется, проблема в iOS при установке видимости скрытой.Если мы установим это как видимое и изменим непрозрачность, тогда это сохранит ту же функциональность.

Добавьте это в ваш файл CSS:

  .fancybox-nav span {
        visibility: visible !important;
        opacity: 0;
    }

    .fancybox-nav:hover span {
        opacity: 1;
    }

Answer 2

Сенсорные события вызывают проблемы.Это определенно немного хак, но хорошо работает:

$(target).on('touchend', function(e) {
    $(this).trigger('click');
});

Answer 3

Самое простое решение - всегда отображать стрелки навигации, как они отображаются при первом касании, а при втором - изменение элемента галереи.

Answer 4

Просто добавьте это, когда вы используете modernizr:

.touch .fancybox-nav span { visibility:visible!important}

Answer 5

Для мобильных устройств вы можете попробовать отключить навигационные стрелки и использовать вместо них помощники кнопок.что-то вроде:

$(".fancyLink").fancybox({
 arrows: false,
 closeBtn: false,
 helpers        : { 
  title : { type : 'inside' },
  buttons   : {}
 }
}); 

конечно, вам нужно загрузить файлы jancy и css fancybox-buttons