圖片預覽插件Viewer

1.簡介

Viewer.js 是一款強大的圖片查看器，像門戶網站一般都會有各自的圖片查看器，如果您正需要一款強大的圖片查看器，也許 Viewer.js 是一個很好的選擇。

Viewer.js 有以下特點：

• 支持移動設備觸摸事件
• 支持響應式
• 支持放大/縮小
• 支持旋轉（類似微博的圖片旋轉）
• 支持水平/垂直翻轉
• 支持圖片移動
• 支持鍵盤
• 支持全屏幻燈片模式（可做屏保）
• 支持縮略圖
• 支持標題顯示
• 支持多種自定義事件
• Viewer.js 提供了純 JS 版本和 jQuery 版本，您可以任意選擇

2.js文件引入

項目中我是用的是Viewer的jquery版本

<!-- 這裏引入的是圖片查看的css -->
<link rel="stylesheet" type="text/css" href="/css/viewer.css" />
<!-- 這裏引用的是formengineWebService下圖片預覽的文件 -->
<script type="text/javascript" src="/js/viewer.js"></script>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>

3.HTML

這裏因爲我使用按鈕時間觸發預覽功能，默認這部分內容隱藏，不讓用戶看見

<div>
  <ul class="images" id="imgWin" style="display:none;"></ul>
</div>

4.動態獲取圖片

項目中的圖片是動態生成的，要請求後臺獲取圖片的相對路徑，然後進行預覽

    //預覽按鈕點擊事件
     function showImg() {
        //清空div中的圖片
         $("#imgWin").empty();
        //退出預覽
         $("#imgWin").viewer('destroy');
         var html = [];
         //設置從第一張圖片開始預覽 
         var index = 0;
         $.ajax({
             url:後臺地址,
             type:'post',
             dataType:'json',
             content:document.body,
             success:function(data){
                if(data.length == 0){
                    showError("圖片不存在！");
                }
                  //動態添加圖片
                  for (var i = 0; i < data.length; i++) {
                         html.push("<li>")
                         html.push('<img src="'+data[i]+'" alt="img_'+i+'">');
                         html.push("</li>");
                     }
                     $("#imgWin").append(html.join(''));
                     //開始預覽
                     openPhotoDialog(index);
             },
             error:function(data){
                 showError("獲取附件圖片失敗！");
             }
        });     
     }

     function openPhotoDialog(index,name) {
         $("#imgWin").viewer({
             shown: function () {
                 $("#imgWin").viewer('view',index);
             }
         });
         $("#imgWin").viewer('show');
     }

5.參考

viewer.js圖片查看器

http://www.dowebok.com/192.html

github參考文檔

https://fengyuanchen.github.io/viewer/

jquery版本下載地址

https://github.com/fengyuanchen/viewer

js版本下載地址

https://github.com/fengyuanchen/viewerjs