探索Photoswipe

发布时间：2023-05-18

一、概述

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。

推荐文章