我已经使用 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>
最佳答案
最简单的选择是将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。
关于jquery - 如何让 Photoswipe 从缩略图列表中识别整个图库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27848767/