Серьезная проблема с Swipebox и мобильным Google Chrome

Всем добрый вечер, у меня серьезная проблема с галереями SWIPEBOX и Google Chrome Mobile. Теперь, пожалуйста, позвольте мне заявить, что я новичок в jquery и javascript и не знаю, что делаю.

Я пытаюсь создать 5 отдельных галерей на одной странице. Я следовал расплывчатым шагам на сайте swipebox и дал каждому классу свое уникальное имя.

class="swipebox1", class="swipebox2", class="swipebox3" (чтобы было проще).

eg.
<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox1" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>

<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox2" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>

Проблема в том, что Google Chrome для мобильных устройств позволяет касаться/нажимать кнопки (закрыть, далее, предыдущая) только в первой галерее. Во второй и третьей галереях вы можете только проводить пальцем (ни одна из кнопок не работает)... Итак, вы не могу закрыть... :(

Я проверил это во всех других браузерах, и он отлично работает (webkit mobile, dolphin mobile, safari pc, safari mac, IE10 pc, Opera pc, Nightly pc)... Я не вносил никаких изменений в файлы swipebox css или js ... (все равно не знаю, что изменить)

Кроме того, мой сценарий:

 <script type="text/javascript">
     jQuery(function($) {
        $(".swipebox1").swipebox();
        $(".swipebox2").swipebox();
        $(".swipebox3").swipebox();
     });
    </script>

Надеюсь это правильно!!!

Я также пробовал:

 <script type="text/javascript">
     jQuery(function($) {
        $(".swipebox1, .swipebox2, .swipebox3").swipebox();
     });
 </script>

но это просто добавило их вместе, чего я не хотел...

Мне действительно нужна чья-то помощь в этом, так как я почти закончил свой адаптивный веб-сайт, и это единственное, что меня сдерживает...

заранее спасибо за любую помощь, которую вы можете предоставить.


mobile google-chrome touch swipe
person David Hornak    schedule 11.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте оставить класс как "swipebox", я имею в виду так:

class="swipebox"

везде для каждой из ваших 3 галерей.

Чтобы запустить Swipebox, используйте атрибут «rel» следующим образом:

<div class="box">
<a rel="gallery-1" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>

<div class="box">
<a rel="gallery-2" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>

Дайте нам знать, если это сработает!

person Paul Denisevich    schedule 30.07.2013
comment
Документация по группировке rel: brutaldesign.github.io/swipebox/#advanced - person showdev; 16.07.2014