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

2022-05-17 16:47 540阅读 0赞

## 前言 ##

在做项目时，会遇到在前台展示附件详情，比如图片，word，pdf等。viewer.js 图片查看器，用来查看页面中的图片。

基本效果：

![70][]

## Viewer.js的使用 ##

这是一个github工程，功能很多。

使用可以参考：

参考：[https://github.com/fengyuanchen/viewerjs\#methods][https_github.com_fengyuanchen_viewerjs_methods]

jQuery检查某个元素在页面上是否存在

[https://www.cnblogs.com/ww03/p/6004234.html][https_www.cnblogs.com_ww03_p_6004234.html]

viewer.min.js图片预览插件ajax动态预览问题（已解决）

[https://blog.csdn.net/u014417573/article/details/73739691][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>
    
    
    <script src="js/jquery.min.js"></script>
    
    <script src="js/viewer.min.js"></script>
    
    
    <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>

实现的效果：

![70 1][]

![70 2][]

样例下载：

[https://download.csdn.net/download/qq\_28817739/10592680][https_download.csdn.net_download_qq_28817739_10592680]

![20180525154213512][]

[70]: /images/20220517/a209c41c669d4b1091f0bbf5ffb5e371.png
[https_github.com_fengyuanchen_viewerjs_methods]: https://github.com/fengyuanchen/viewerjs#methods
[https_www.cnblogs.com_ww03_p_6004234.html]: https://www.cnblogs.com/ww03/p/6004234.html
[https_blog.csdn.net_u014417573_article_details_73739691]: https://blog.csdn.net/u014417573/article/details/73739691
[70 1]: /images/20220517/67707821c4a346debae5653685bb433c.png
[70 2]: /images/20220517/ae2eb66c510b44d7aa93a6868126f707.png
[https_download.csdn.net_download_qq_28817739_10592680]: https://download.csdn.net/download/qq_28817739/10592680
[20180525154213512]: /images/20220517/47e08d29b0064786914a94597abfe935.png