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

2021-11-1 / 0 评论 / 486 阅读
温馨提示:
本文最后更新于2021-11-1,已超过半年没有更新,若内容或图片失效,请留言反馈。

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
如图:
图片alt

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>

评论一下?

OωO
取消