如何让 Photoswipe 从缩略图列表中识别整个画廊

Question

我已经使用 Zurb Foundation 5 块网格格式设置了我的 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

最简单的选择是将图形标签切换为 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。

如何让 Photoswipe 从缩略图列表中识别整个画廊

How do I get Photoswipe to recognize entire gallery from list of thumbnail images

html

jquery

thumbnails

photoswipe

zurb-foundation