Question

我使用Zurb Foundation 5块网格格式设置了我的Photoswipe 4缩略图，但是当点击一个拇指时，只有一张图片会在照片中加载。有没有办法让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从缩略图列表中识别整个图库

1 个答案: