探索Photoswipe

一、概述

Photoswipe是一款輕量級的JavaScript圖庫，專為移動端和桌面端所設計。在移動端，它使你的圖片可以在手勢上輕鬆自由的縮放和滑動，而給用戶帶來更好的使用體驗；在桌面端，使你的頁面可以更美觀的展示圖片。現在我們來一起深入了解Photoswipe吧！

二、基本用法

在網站上集成Photoswipe只需要以下一些簡單的步驟。

1. 引入Photoswipe文件

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

2. 創建圖片

現在，我們將利用Photoswipe來呈現一些圖片。也許可以這樣來創建圖片的容器。

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="path/to/your/image.jpg" itemprop="contentUrl">
      <img src="path/to/your/image-thumbnail.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <figcaption itemprop="caption description">Image caption</figcaption>
  </figure>
</div>

3. 初始化Photoswipe

var initPhotoSwipeFromDOM = function(gallerySelector) {

  // 解析圖庫對象，動態獲取文件夾下的圖片及縮略圖信息
  var parseThumbnailElements = function(el) {
      // code ...
  };
  
  // 初始化PhotoSwipe
  var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
      // code...
  };

  // 聚合圖庫
  var galleryElements = document.querySelectorAll(gallerySelector);

  for(var i=0, l=galleryElements.length; i<l; i++) {
      galleryElements[i].setAttribute('data-pswp-uid', i+1);
      galleryElements[i].onclick = onThumbnailsClick;
  }

  // 點擊圖片，打開PhotoSwipe
  var onThumbnailsClick = function(e) {
      // code...
      return false;
  };

  // Start everything
  parseThumbnailElements(galleryElements[0]);
}
// 進行初始化操作，傳入圖庫容器選擇器
initPhotoSwipeFromDOM('.my-gallery');

三、細節分析

接下來，我們來一步一步深入探索Photoswipe一些細節。

1. 使用Photoswipe實現列表式圖片展示

Photoswipe支持多種不同的圖片展示方式，除了常規滑動方式，還支持列表展示。

示例代碼如下：

var initPhotoSwipeFromDOM = function(gallerySelector) {

  // 解析圖庫對象，動態獲取文件夾下的圖片及縮略圖信息
  var parseThumbnailElements = function(el) {
      // code ...
  };
  
  // 初始化PhotoSwipe
  var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
      // code...
  };

  // 聚合圖庫
  var galleryElements = document.querySelectorAll(gallerySelector);

  for(var i=0, l=galleryElements.length; i<l; i++) {
      galleryElements[i].setAttribute('data-pswp-uid', i+1);
      galleryElements[i].onclick = onThumbnailsClick;
  }

  // 點擊圖片，打開PhotoSwipe
  var onThumbnailsClick = function(e) {
      // code...
      return false;
  };

  // Start everything
  parseThumbnailElements(galleryElements[0]);

  // 使用Photoswipe實現列表式圖片展示
  var pswpElement = document.querySelectorAll('.pswp')[0];
  galleryElements[0].addEventListener('click', function (e) {
    e.preventDefault();
    var index = 0;
    openPhotoSwipe( index, galleryElements[0], false, true );
  });
}
// 進行初始化操作，傳入圖庫容器選擇器
initPhotoSwipeFromDOM('.my-gallery');

2. Photoswipe將照片或圖像打包成一個gallery

Photoswipe不僅只支持單個照片展示，同時也支持將照片或圖像打包成一個gallery，分享到其他平台。可以參考如下代碼。

3. Photoswipe添加「分享」功能

Photoswipe還支持「分享」功能，通過分析庫源碼，參考如下操作實現分享功能。

首先，我們需要在圖片上添加分享按鈕。添加代碼如下：

<br><a href="javascript: void(0)" class="pswp__button pswp__button--share" title="Share"></a>

在頁面中添加一個類名為「.pswp__share-modal」的DIV節點，作為彈出的分享顯示界面，添加代碼如下：

<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  <div class="pswp__share-tooltip"></div>
</div>

然後，在Options中添加如下代碼：

shareButtons: [
    {
        id: 'wechat',
        label: 'WeChat',
        url: 'https://open.weixin.qq.com/connect/shareqr?appid=APPID&src=app&timestamp=TIMESTAMP'
    },
    {
        id: 'weibo',
        label: 'Weibo',
        url: 'https://service.weibo.com/share/share.php?url=URL&title=TITLE&pic=PIC'
    }
],
getImageURLForShare: function() {
    return this.currItem.src || '';
},
getPageURLForShare: function() {
    return window.location.href;
},
getTextForShare: function() {
    return this.currItem.title || '';
}

四、結論

Photoswipe是非常輕量級的圖庫，可以非常方便地集成到任何Web頁面中。通過本文介紹的這些方法，相信可以讓你更好地了解並使用Photoswipe。