【JS图片阅览器】安装使用Viewer.js 并用JS让Viewer.js显示图片

1. 下载

Viewer.js官网下载地址：https://fengyuanchen.github.io/viewerjs/
网盘下载地址：https://zijieyunpan.com/E8f4Vo1Z4iK

2. 安装

引用文件 （需先引用jquery，然后放在jquery的后面）

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

给图片加入class属性：viewer
如图：

JS启用插件

$('.viewer').viewer();

然后点击图片即可查看效果~

3. 扩展：用JS让Viewer.js显示图片

例子：

<img src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-1.jpg" id="viewer41930" style="display: none;">
<script>
var image = new Viewer(document.getElementById("viewer41930"),{url: "src"});
document.getElementById("viewer41930").click();
</script>