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>