版权声明：本文为博主原创文章，未经博主允许不得转载。-QQ1164014750-微信公众号：耿子blog https://blog.csdn.net/qq_28817739/article/details/81532496
前言
在做项目时，会遇到在前台展示附件详情，比如图片，word，pdf等。viewer.js 图片查看器，用来查看页面中的图片。
基本效果：
Viewer.js的使用
这是一个github工程，功能很多。
使用可以参考：
参考：https://github.com/fengyuanchen/viewerjs#methods
jQuery检查某个元素在页面上是否存在
https://www.cnblogs.com/ww03/p/6004234.html
viewer.min.js图片预览插件ajax动态预览问题（已解决）
https://blog.csdn.net/u014417573/article/details/73739691
这里实现的效果就是，点击图片名称展示图片信息。
具体看代码：
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#imgdiv{
width: 980px;
height: 30px;
margin:0 auto;
background: #ccc;
}
a {
display: inline-block;
width: 100px;
height: 30px;
color: #000;
line-height: 30px;
text-decoration: none;
}
a:hover{
display: inline-block;
color: #000;
text-decoration: none;
}
</style>
</head>
<body>
<center>
<h1>点击图片名称展示图片大图</h1>
</center>
<!-- 图片容器 -->
<div id="imgdiv">
<a href="#">tibet-6.jpg</a>
<a href="#">tibet-5.jpg</a>
</div>
<!-- 引入js -->
<script src="js/jquery.min.js"></script>
<!-- <script src="js/viewer-jquery.min.js"></script> -->
<script src="js/viewer.min.js"></script>
<!-- 写一个js -->
<script type="text/javascript">
//点击a标签触发
$("a").click(function(){
//先获取 这个a 的 text 属性
var img_name = $(this).text();
//获取图片名称前缀
var imgname = img_name.split(".")[0];
//拼装完整的img 的路径
var imgnameall = "./img/thumbnails/"+img_name;
if($("#"+imgname).length > 0){
// img元素已经存在，不需要再页面添加img元素了
var viewer = new Viewer(document.getElementById('imgdiv'), {
//重新装载一次，在之后添加的图片也可以使用
show: function (){
viewer.update();
},
hiden: function() {
viewer.destroy();
}
}
);
$("#"+imgname).trigger("click");
}else{
// 调用写好的js
$("#imgdiv").append('<img id="'+imgname+'" src="'+imgnameall+'" style="display:none;" />');
//修改样式，展示图片
//$("#"+imgname).css("display","block");
//为新添加的元素添加一个click事件
var viewer = new Viewer(document.getElementById('imgdiv'), {
//重新装载一次，在之后添加的图片也可以使用
//显示的时候 重新装载viewer
show: function (){
viewer.update();
},
//点击关闭按钮，将viewer销毁
hiden: function() {
viewer.destroy();
}
}
);
$("#"+imgname).trigger("click");
//$("#"+imgname).css("display","none");
}
});
</script>
</body>
</html>
实现的效果：
样例下载：
https://download.csdn.net/download/qq_28817739/10592680
