viewer.js的一些简单使用

最近有个需求是前台页面要求带缩略图的图片的查看，也试过一些插件，比如:slick-carousel； layui等
但是有些插件js和底层js冲突，无法使用，然后发现用Viewer插件的挺多，就决定使用这个。

1. Viewer.js 是一款强大的图片相册插件，底部有缩略图列表可切换。 关于viewer.js的参考文档：viewer.js参考文档

   支持移动设备触摸事件
   支持响应式
   支持放大/缩小
   支持水平/垂直翻转
   支持图片移动
   支持键盘
   支持缩略图
   支持标题显示
   支持多种自定义事件

2. 在线实例地址 一款实用的viewer.js 图片相册

3. demo下载地址 下载

4. 在项目中引入(这里使用的是js版本)

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

   HTML

   	<ul id="jq22">
           <c:forEach var="x" items="${projectCaseImageList}">
               <li>
                   <img hidden src="${x.imageId}" title="${x.seqNo}.${x.content}" alt="${x.seqNo}.${x.content}"/>
               </li>
           </c:forEach>
       </ul>
   

   javascript`

   var viewer = new Viewer(document.getElementById('jq22'), {
       url: 'data-original',  	//设置大图片的 url
       rotatable:false,		
       scalable:false,			
   });
   

   另外由于这边的需求是直接全屏显示，所以我这边的办法是首先先window.open打开一个新窗口,然后在这个页面隐藏一个按钮，最后页面加载时给点击事件

    <a type="hidden" id="btn1" click="show(this);" >show()</a>
    
       $(function () {
           var viewer = new Viewer(document.getElementById('jq22'), {
               url: 'data-original',
               rotatable:false,
               scalable:false,
               setTimeout(function() {
                   // IE浏览器
                   if(document.all) {
                       document.getElementById('btn1').onclick = function() {
                           viewer.show();
                       }
                   }
                   // 其它浏览器
                   else {
                       var e = document.createEvent("MouseEvents");
                       e.initEvent("click", true, true);
                       document.getElementById("btn1").dispatchEvent(e);
                       viewer.show();
                   }
               }, 0);
       });
   

   这边的显示效果就是点击预览按钮，然后打开新窗口，页面全屏展示图片，