jquery - 如何让 Photoswipe 从缩略图列表中识别整个图库

Question

我已经使用 Zurb Foundation 5 block 网格格式设置了 Photoswipe 4 缩略图，但是当单击拇指时，只有一张图像会加载到 photoswipe 中。有没有办法让 photoswipe 识别出图像库是缩略图 ul 网格中包含的所有图像？

<ul class="my-gallery small-block-grid-1 large-block-grid-3" itemscope itemtype="http://schema.org/ImageGallery">
<li>
    <figure itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image01.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image01.jpg" itemprop="thumbnail" alt="Image description" /></a>
    <figcaption itemprop="caption description">Image caption 1</figcaption>
    </figure>
</li>
<li>
<figure itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/images/image02.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image02.jpg" itemprop="thumbnail" alt="Image description" /></a>
<figcaption itemprop="caption description">Image caption 1</figcaption>
</figure>
</li>
</ul>

Answer 1

最简单的选择是将figure标签切换为li标签。

<ul class="my-gallery small-block-grid-1 large-block-grid-3" itemscope itemtype="http://schema.org/ImageGallery">
  <li itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image01.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image01.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <div class="caption" itemprop="caption description">Image caption 1</div>
  </li>

  <li itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image02.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image02.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <div class="caption" itemprop="caption description">Image caption 1</div>
  </li>
</ul>

然后在您的 js 中(假设您使用的是 photoswipe 网站的示例)更改以下行:

return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');

至

return (el.tagName && el.tagName.toUpperCase() === 'LI');

然后最后更新你的 CSS。