featherlight gallery touch 示例

Question

请给我展示一个使用触摸库启用滑动（导航图像）的 featherlight 示例。

根据网站 https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices 支持三个库来启用触摸：

jQuery 手机
jQuery 检测滑动
jQuery 移动事件

正在寻找一个示例来说明如何将这些中的任何一个与 featherlight 一起使用。

我不需要另一个库，因为它已经在使用了。

Answer 1

经过一番搜索并尝试找到示例后，我找到了答案。

featherlight.js 的文档不是很清楚，但它只是答案。只需在包含 featherlight.js 之前包含 swipe_detec.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>

希望有人觉得它有用。

Answer 2

感谢@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>

featherlight gallery touch 示例

featherlight gallery touch example

jquery-mobile

touch

swipe

featherlight.js