分類：網頁開發

PhotoSwipe 畫廊函式庫，網頁展示照片

本篇介紹如何使用 PhotoSwipe 畫廊函式庫，建立好用的網頁看圖介面，方便電腦與手機使用者在網頁上瀏覽圖片。

PhotoSwipe 是一套開放原始碼的 JavaScript 畫廊函式庫，可以讓我們在網頁中建立直覺的看圖介面，方便瀏覽大量的圖片，而且也支援手機的觸控操作，是一套很不錯的圖片展示工具函式庫。

PhotoSwipe 基本用法

Step 1
從 PhotoSwipe 的 GitHub 網站上下載它的原始碼，將 dist 目錄下的檔案取出來，引入網頁中：

<!-- 核心 CSS 檔案 -->
<link rel="stylesheet" href="path/to/photoswipe.css">

<!-- UI 介面 CSS 檔案，在這個 CSS 檔的目錄中，
     同時有包含幾個圖檔，注意不要漏掉 -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">

<!-- 核心 JS 檔案 -->
<script src="path/to/photoswipe.min.js"></script>

<!-- UI 介面的 JS 檔案 -->
<script src="path/to/photoswipe-ui-default.min.js"></script>

Step 2
在網頁的 </body> 之前，加入以下 PhotoSwipe 節點元素，並且自己調整 UI 的配置：

<!-- PhotoSwipe 個根節點元素，class 一定要是 pswp -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

  <!-- PhotoSwipe 的背景 -->
  <div class="pswp__bg"></div>

  <!-- Slides 包裝元素（overflow:hidden） -->
  <div class="pswp__scroll-wrap">

    <!-- 實際放置圖片的容器，PhotoSwipe 只會同時從放三張圖片在 DOM，
         這樣比較節省記憶體，這部份不要更改 -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>

    <!-- 上方的 UI 設定，可以自行調整 -->
    <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>

        <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>

</div>

Step 3
接著就可以使用 JavaScript 來啟動 PhotoSwipe 顯示圖片了，以下是一段啟動 PhotoSwipe 的範例：

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

// 定義每一張圖片的 URL 與大小等
var items = [
    {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    },
    {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }
];

// 定義各種選項
var options = {
    index: 0 // 從第一張圖片開始顯示
};

// 初始化並開啟 PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
</script>