一个页面中多个单独的 amp-lightbox-gallery

Question

如何在一个页面中拥有多个单独的灯箱画廊？

文档对此只字未提。

我知道有一个灯箱组件，可以用来分隔一些图像集，但缺少缩略图和标题等功能。

谷歌搜索无济于事，非常感谢您的帮助。

Answer 1

通过将 lightbox 属性设置为不同的值，您可以使它们成为不同画廊的一部分。

By default, all lightboxed elements will be grouped into the same lightbox unless they belong to a carousel. All elements in the same lightboxed carousel belong to the same lightbox. You can override this behavior by setting the lightbox attribute to a unique string.

示例：

<div>
  <amp-img lightbox="example" src="image1.jpg" width="400" height="300" layout="responsive"></amp-img>
  <amp-img lightbox="example" src="image2.jpg" width="400" height="300" layout="responsive"></amp-img>
</div>

<!-- These will belong to a different lightbox gallery -->
<div>
  <amp-img lightbox="another" src="image3.jpg" width="400" height="300" layout="responsive"></amp-img>
  <amp-img lightbox="another" src="image4.jpg" width="400" height="300" layout="responsive"></amp-img>
</div>

一个页面中多个单独的 amp-lightbox-gallery

Multiple separate amp-lightbox-gallery in a page

amp-html