jquery图片查看插件Viewer.js使用讲解

jquery插件Viewer.js是一个强大的图片查看工具,Viewer也提供了一个纯js版本的工具
GITHUB地址:https://github.com/fengyuanchen/viewer
效果:

提示:本站图片查看也是采用该工具
使用:
JavaScript版本

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

jQuery 版本：

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>

注意：JS 版本和 jQuery 版本名字虽然一样，但代码不一样，不能通用，请到 github 上下载需要的版本。
 

HTML

<ul id="dowebok">
    <li><img src="img/tibet-1.jpg" alt="图片1"></li>
    <li><img src="img/tibet-2.jpg" alt="图片2"></li>
    <li><img src="img/tibet-3.jpg" alt="图片3"></li>
    <li><img src="img/tibet-4.jpg" alt="图片4"></li>
    <li><img src="img/tibet-5.jpg" alt="图片5"></li>
    <li><img src="img/tibet-6.jpg" alt="图片6"></li>
</ul>

JavaScript:

JavaScript版本:

var viewer = new Viewer(document.getElementById('dowebok'));

jQuery 版本：

$('#dowebok').viewer();

参数使用

$('#dowebok').viewer({
    navbar:false,//关闭缩略导航
    toolbar:false//关闭工具栏
});

其他配置参数:

图片查看工具 Viewer.js Viewer

https://blog.xqlee.com/article/202.html