请给我展示一个使用触摸库启用滑动(导航图像)的 featherlight 示例。
根据网站 https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices 支持三个库来启用触摸:
- jQuery 手机
- jQuery 检测滑动
- jQuery 移动事件
正在寻找一个示例，展示如何将这些中的任何一个与 featherlight 一起使用。
- 我不需要另一个图书馆，因为它已经在使用了。
最佳答案
经过一番搜索并尝试找到示例后，我找到了答案。
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>
希望有人觉得它有用。
关于jquery-mobile - featherlight gallery touch 示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32904461/