viewer.js图片预览插件

最新推荐文章于 2025-06-19 12:22:22 发布

原创最新推荐文章于 2025-06-19 12:22:22 发布 · 847 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#viewer

这篇博客介绍了viewer.js，一个用于图片预览的JavaScript插件。提供了JS和jQuery两个版本，GitHub链接分别给出。内容包括如何在循环中应用viewer.js进行图片预览，并指出该插件默认情况下只能预览一个图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

viewer GitHub 地址：
JS 版本：https://github.com/fengyuanchen/viewerjs
jQuery 版本：https://github.com/fengyuanchen/viewer

链接：https://pan.baidu.com/s/1ZZD6AkaxUKD2SqoCd_I2lA 密码：cmxy

一、循环时候使用viewer.js图片预览

<!-- 图片预览 -->
<link rel="stylesheet" type="text/css" href="static/viewer/css/viewer.min.css">


<img title="双击预览" alt="无" onclick="getImg(this)" data-original="/uploadPath/${xmjxlist.chengbandan}" 
src="/uploadPath/${xmjxlist.chengbandan}" width="50px" height="50px">

<script type="text/javascript" src="static/lib/jquery/1.9.1/jquery.min.js"></script>
<!-- 图片预览 -->
<script type="text/javascript" src="static/viewer/js/viewer-jquery.min.js"></script>
<script type="text/javascript">
//循环查看所有
function getImg(obj){
	$(obj).viewer();			
}
</script>

二、只能查看一个

<!-- 图片预览 -->
<link rel="stylesheet" type="text/css" href="static/viewer/css/viewer.min.css">

<img id="dowebok" title="双击预览" alt="无" data-original="/uploadPath/${xmjxlist.chengbandan}" 
src="/uploadPath/${xmjxlist.chengbandan}" width="50px" height="50px">


<script type="text/javascript" src="static/lib/jquery/1.9.1/jquery.min.js"></script>
<!-- 图片预览 -->
<script type="text/javascript" src="static/viewer/js/viewer-jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
	    $('#dowebok').viewer({
		    url: 'data-original',
	    });
    }
</script>