viewer.js圖片預覽插件

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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章