PhotoSwiper

導語：

PhotoSwiper外掛功能可實現：多張圖片預覽、縮放、分享、下載。

一、使用步驟

1、引入標頭檔案：photoswipe.css、default-skin.css、photoswipe.min.js、photoswipe-ui-default.min.js檔案。
備註：標頭檔案位置在PhotoSwiper online demo中dist資料夾

<link rel="stylesheet" href="lib/dist/photoswipe.css">
<link rel="stylesheet" href="lib/dist/default-skin/default-skin.css">
<script src="lib/dist/photoswipe.min.js"></script>
<script src="lib/dist/photoswipe-ui-default.min.js"></script>
 

2、DOM中新增容器，核心要新增.pswp類。

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
    <!--滑動容器類overflow預設是hidden，容器中是三個item，這部分是固定-->
    <div class="pswp__container">
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
    </div>
    <!--滑動區域上方操作條：顯示圖片數量、放大、全屏、分享、關閉和左右檢視按鈕-->
    <div class="pswp__ui pswp__ui--hidden">
        <div class="pswp__top-bar">
            <div class="pswp__counter"></div>
            <!--關閉操作-->
            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
            <!--分享操作-->
            <button class="pswp__button pswp__button--share" title="Share"></button>
            <!--全屏操作-->
            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
            <!--放大縮小操作-->
            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
            <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
            <!-- 當容器載入時，元素類pswp__preloader--active-->
            <div class="pswp__preloader">
                <div class="pswp__preloader__icn">
                    <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--分享條操作-->
        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div>
        </div>
        <!--左滑操作-->
        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
        </button>
        <!--右滑操作-->
        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
        </button>

        <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
        </div>

    </div>
</div>
 

3.自定義DOM中需瀏覽的圖片如下：（此部分根據需要自行更改）

 <img src="img/image1.jpg" alt="" class="imgStyle"/>
 <img src="img/image2.jpg" alt="" class="imgStyle"/>

4.JS部分，初始化容器，4個引數：pswpElement、PhotoSwipeUI_Default、imgItems、options

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, imgItems, options);
gallery.init();
 

• 引數1：pswpElement(DOM中類為.pswp的容器)

  var pswpElement = document.querySelectorAll('.pswp')[0];
  

• 引數2：PhotoSwipeUI_Default(此部分可自行修改，如果樣式採用default-skin.css預設樣式，引數2選PhotoSwipeUI_Default)

• 引數3：imgItems（需預覽的圖片資訊包括src，寬，高）

  var imgItems = [
  {
     src: 'https://placekitten.com/600/400',
     w: 600,
     h: 400
  },
  {
     src: 'https://placekitten.com/1200/900',
     w: 1200,
     h: 900
  }
  ];
  

• 引數4：options(容器常用操作設定)

  var options = {
      history: false,
      focus: false,
      showAnimationDuration: 0,
      hideAnimationDuration: 0,
      index:this.index,//用於顯示當前點選圖片
      fullscreenEl : false,//點選圖片關閉需要保持此項為false
      tapToClose: true,//點選圖片關閉
      };
  

4、自定義預覽圖片資訊時，圖片可為本地，可為網路圖片。

獲取DOM中所有圖片，併為每張圖片新增點選事件，開啟容器。

var imgItems = new Array();
window.onload = function(){
    var imgs = document.getElementsByTagName("img");
    var len = imgs.length;
    for(var i = 0;i<len;i++){
       imgs[i].index = i;//儲存當前圖片index用於開啟外掛時顯示當前圖片
       imgs[i].onclick = openPhotoSwipe;//為每張圖片新增點選後開啟畫廊外掛事件
       loadImage(i,imgs[i].src,call);//添加回調函式用於獲取網路圖片寬高
    }
};

• 獲取圖片的寬高，可直接用naturalWidth獲取；
  
• 但是獲取網路圖片時，如果圖片未加載出來時，它的寬高獲取的是0，所以在獲取網路圖片高寬時，用img的onload事件非同步載入,用callback回撥函式形成閉包;
  

• 初始化陣列imgItems時，一開始用的imgItems.push(imgItem);但是遇到的問題時，首次載入圖片時順序不對，分析原因是callback回撥函式非同步，圖片載入時間不同，用時短的在最前面，所以做出優化，用index指定圖片指定位置；

  function loadImage(i,url,callback) {
     var img =new Image();
     img.onload =function(){
        img.onload =null;
        callback(i,img);
     };
     img.src = url;
  }
  
  function call(i,img){
      var imgItem = {src:img.src,w:img.width,h:img.height};//用imgItems儲存圖片路徑,用.src和.naturalWidth獲得圖片原始路徑和寬高
      //imgItems.push(imgItem);//imgItems儲存所有需瀏覽的圖片資訊，但這種新增的資料是無序
      imgItems[i] = imgItem;//通過index指定給陣列賦值
  }