html页面点击图片名称查看图片------图片预览插件viewer.js使用-蒲公英云

html页面点击图片名称查看图片------图片预览插件viewer.js使用

前言

在做项目时，会遇到在前台展示附件详情，比如图片，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>