PhotoSwipe - 将图片连接到图库

要将图片连接到图库，您可以使用PhotoSwipe库。以下是使用PhotoSwipe库的代码示例：

首先，您需要引入PhotoSwipe库的CSS和JavaScript文件。您可以从官方网站上下载这些文件，或者使用CDN。

<link rel="stylesheet" href="path/to/photoswipe.css" />
<link rel="stylesheet" href="path/to/default-skin/default-skin.css" />

<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

接下来，您需要创建一个图库的HTML结构。每个图像都需要一个包裹在<figure>标签中的缩略图和原始图像的链接。

<div class="my-gallery">
  <figure>
    <a href="path/to/image1.jpg">
      <img src="path/to/thumbnail1.jpg" alt="Image 1" />
    </a>
    <figcaption>Caption 1</figcaption>
  </figure>
  <figure>
    <a href="path/to/image2.jpg">
      <img src="path/to/thumbnail2.jpg" alt="Image 2" />
    </a>
    <figcaption>Caption 2</figcaption>
  </figure>
  <!-- 添加更多图像 -->
</div>

然后，您需要编写一些JavaScript代码来初始化PhotoSwipe并处理图像的点击事件。

var gallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default);

// 处理图像点击事件
document.querySelectorAll('.my-gallery figure').forEach(function(figure) {
  figure.addEventListener('click', function() {
    var index = Array.from(this.parentNode.children).indexOf(this); // 获取当前图像的索引
    gallery.options.index = index; // 设置初始索引
    gallery.init();
  });
});

最后，您需要在页面加载完成后调用初始化代码。

document.addEventListener('DOMContentLoaded', function() {
  // 初始化图库
  gallery.init();
});

这是一个简单的使用PhotoSwipe库将图像连接到图库的示例。您可以根据自己的需求进行修改和扩展。请记住，您需要根据您的实际文件路径和图像链接进行调整。