JSP使用Viewer插件

JSP使用Viewer插件

1.下载
https://fengyuanchen.github.io/viewer
2.引用

<link rel="stylesheet" type="text/css" href="../css/viewer.min.css">
<script type="text/javascript" src="../script/viewer.min.js"></script>

3.使用

<script type="text/javascript">
	$('#imgList').viewer();
</script>
<script type="text/javascript">
	var $images = $('#imgList');
	var options = {
		    // inline: true,
		    url: 'data-original',
		    ready: function (e) {
		      console.log(e.type);
		    },
		    show: function (e) {
		      console.log(e.type);
		    },
		    shown: function (e) {
		      console.log(e.type);
		    },
		    hide: function (e) {
		      console.log(e.type);
		    },
		    hidden: function (e) {
		      console.log(e.type);
		    },
		    view: function (e) {
		      console.log(e.type);
		    },
		    viewed: function (e) {
		      console.log(e.type);
		    }
		  };
	$images.on({
	    ready:  function (e) {
	      console.log(e.type);
	    },
	    show:  function (e) {
	      console.log(e.type);
	    },
	    shown:  function (e) {
	      console.log(e.type);
	    },
	    hide:  function (e) {
	      console.log(e.type);
	    },
	    hidden: function (e) {
	      console.log(e.type);
	    },
	    view:  function (e) {
	      console.log(e.type);
	    },
	    viewed: function (e) {
	      console.log(e.type);
	    }
	  }).viewer(options);

4.动态生成图片后，需要刷新

<ul id="imgList"></ul>
<script type="text/javascript">
	var list = json.split(",");
	for(var i=0;i<list.length;i++){
		var url ="../img"+list[i];
		var liImg="<li><img style='width:50px; height:50px' src='"+url
			+"' data-original='"+url+"' alt='"+i+"'></li>";
			$('#imgList').append(liImg);
	}
  $('#imgList').viewer('update');
</script>