PhotoSwipejs_

PhotoSwipejs_ 详解

简介

PhotoSwipe 是一个 JavaScript 图库插件，用于在移动设备和桌面浏览器上创建触摸友好的图像画廊，它可以处理各种大小的图像，并且可以在不同的设备和屏幕尺寸上无缝工作，PhotoSwipe 还支持图像的缩放和滑动浏览。

安装

要在你的项目中使用 PhotoSwipe，你需要先下载并引入它的 JavaScript 和 CSS 文件，你可以从 PhotoSwipe 的 GitHub 页面（https://github.com/dimsemenov/PhotoSwipe）下载这些文件，或者通过 npm 或 yarn 安装。

npm install photoswipe
yarn add photoswipe

在你的 HTML 文件中引入 PhotoSwipe 的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="path/to/photoswipe.css">
<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipeuidefault.min.js"></script>

使用

要使用 PhotoSwipe，你需要创建一个图像数组，其中每个元素都是一个包含 src，w 和 h 属性的对象，你需要初始化 PhotoSwipe，并将这个数组传递给它。

以下是一个简单的示例：

var openPhotoSwipe = function() {
  var pswpElement = document.querySelectorAll('.pswp')[0];
  
  // 图片数组
  var items = [
    {src: 'path/to/image1.jpg', w: 1024, h: 768},
    {src: 'path/to/image2.jpg', w: 1024, h: 768},
    // ...
  ];
  
  // 初始化 PhotoSwipe
  var options = {
    index: 0, // 初始显示的图片索引
    bgOpacity: 0.7, // 背景透明度
    showHideOpacity: true // 点击弹窗外部是否隐藏弹窗
  };
  
  var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  
  gallery.init();
};
openPhotoSwipe();

在这个例子中，我们首先选择了页面中的 .pswp 元素作为 PhotoSwipe 的容器，我们创建了一个包含两个图像对象的数组，每个对象都有一个 src 属性，指向图像的文件路径，以及 w 和 h 属性，表示图像的宽度和高度，我们用这个数组和一个选项对象来初始化 PhotoSwipe。

选项

PhotoSwipe 提供了许多选项，可以让你定制其行为和外观，以下是一些常用的选项：

index：初始显示的图片索引。

bgOpacity：背景的透明度。

showHideOpacity：是否在点击弹窗外部时隐藏弹窗。

fullscreen：是否全屏显示图片。

shareEl：分享按钮的元素。

imgMaxWidth：图片的最大宽度。

galleryUID：画廊的唯一标识符。

galleryPIDs：图片的唯一标识符数组。

你可以查看 PhotoSwipe 的文档（http://photoswipe.com/documentation/gettingstarted.html）以获取更多信息。