обзорная галерея touch touch

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

сообщается на сайте https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices есть три библиотеки поддерживаются для того, чтобы контакт:

JQuery Mobile
JQuery detectSwipe
JQuery Мобильные события

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

Мне не нужна другая библиотека, так как она уже используется.

источник

2015-10-02 Hussain

после некоторого поиска и попытки найти пример, я нашел ответ.

Документация featherlight.js не так понятна, но это просто ответ. Просто включите swipe_detec.js, прежде чем включать featherlight.js, и он позволит осуществлять сенсорный контроль на мобильных устройствах.

пример

<html> 
    <head> 
    <!-- jquery --> 
    <script src="//code.jquery.com/jquery-latest.js"></script> 

    <!-- featherlight --> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script> 
     <link href="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.css" type="text/css" rel="stylesheet" /> 
     <script src="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> 

<!-- featherlight gallery --> 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" /> 
<script src="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.gallery.min.js" type="text/javascript"></script> 
</head> 

    <body> 
<a class="thumbnail gallery" href="a.jpg" > <img src="a.jpg" /> </a> 
<a class="thumbnail gallery" href="b.jpg" > <img src="b.jpg" /> </a> 
<a class="thumbnail gallery" href="c.jpg" > <img src="c.jpg" /> </a> 

    <script> 
    $(document).ready(function(){ 
     $('.gallery').featherlightGallery(); 
    }); 
    </script> 
    </body> 
    </html>

надежда кто-то считает это полезным.

источник

2015-10-02 10:02:30 Hussain

запросов Напряжения приветствовать, даже если только для уточнения дока. –

Я только разветвил ваши featherlightjs и создал запрос на перенос обновлений: – Hussain

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

<html> 
    <head> 
    <!-- jquery --> 
    <script src="//code.jquery.com/jquery-latest.js"></script> 

    <!-- featherlight --> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.3/jquery.detect_swipe.min.js"></script> 
     <link href="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.min.css" type="text/css" rel="stylesheet" /> 
     <script src="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> 

<!-- featherlight gallery --> 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" /> 
<script src="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.gallery.min.js" type="text/javascript"></script> 
</head> 

    <body> 
<a class="thumbnail gallery" href="a.jpg" > <img src="a.jpg" /> </a> 
<a class="thumbnail gallery" href="b.jpg" > <img src="b.jpg" /> </a> 
<a class="thumbnail gallery" href="c.jpg" > <img src="c.jpg" /> </a> 

    <script> 
    $(document).ready(function(){ 
     $('.gallery').featherlightGallery(); 
    }); 
    </script> 
    </body> 
    </html>

источник

2016-11-08 01:51:32 ingleno

проверьте, имеет ли ваш HTML-контейнер тот же класс для галереи. – Hussain

обзорная галерея touch touch

ответ

Смежные вопросы