amp-lightbox-gallery
简介
amp-lightbox-gallery 组件为 AMP 组件（例如，amp-img、amp-carousel）提供“灯箱”体验。当用户与 AMP 元素交互时，UI 组件会扩展以填充视口，直到用户关闭它。目前，仅支持图像。
设置
在标头中导入 amp-lightbox-gallery 组件。
<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
如果您将灯箱与轮播一起使用，则可以在标头中选择性地导入 amp-carousel 组件。
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
基本用法
这是一个基本示例，演示了灯箱化的 <amp-img>。您在页面上有一个或多个 <amp-img> 元素。只需将“lightbox”属性添加到您希望在灯箱中查看的每个图像即可。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<amp-img lightbox src="/static/samples/img/road-1.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox src="/static/samples/img/road-2.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox src="/static/samples/img/road-3.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
与 amp-carousel 一起使用
您还可以将 <amp-lightbox-gallery> 与 <amp-carousel> 结合使用，以在灯箱中查看轮播的内容。只需简单地包含一个带有 <amp-img> 的 <amp-carousel>，并将“lightbox”属性添加到 <amp-carousel>。灯箱图像将与轮播幻灯片同步。
<amp-carousel lightbox width="400" height="300" layout="responsive" type="slides">
<amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive"></amp-img>
<amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive"></amp-img>
<amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive"></amp-img>
</amp-carousel>
灯箱分组
默认情况下，所有灯箱化的元素都将分组到同一灯箱中，除非它们属于轮播。同一灯箱轮播中的所有元素都属于同一灯箱。您可以通过将灯箱属性设置为唯一字符串来覆盖此行为。一种常见的模式是，有一个英雄图像，该图像会打开到一个包含多个图像的灯箱画廊中。
<amp-img lightbox="hero" src="/static/samples/img/clean-2.jpg" width="400" height="300" layout="responsive">
<span class="overlay-text">See photo gallery</span>
</amp-img>
<div hidden>
<amp-img lightbox="hero" src="/static/samples/img/clean-1.jpg" layout="responsive" width="400" height="710"></amp-img>
<amp-img lightbox="hero" src="/static/samples/img/clean-3.jpg" width="400" height="300" layout="responsive"></amp-img>
</div>
标题
您可以选择为灯箱中的每个元素指定标题。这些字段会按照以下优先级顺序由 <amp-lightbox-gallery> 自动读取和显示： - figcaption（如果灯箱化元素是 figure 的子元素） - aria-describedby 以下示例演示了如何使用标题。第一张图像没有标题。第二张图像使用 <figcaption>。第三张图像使用 aria-describedby。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<amp-img lightbox="caption" src="/static/samples/img/road-1.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure class="sample-figure">
<amp-img lightbox="caption" src="/static/samples/img/road-2.jpg" width="300" height="200" layout="responsive"></amp-img>
<figcaption>
This is a long road. We don't know where it leads.
</figcaption>
</figure>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox="caption" src="/static/samples/img/road-3.jpg" layout="responsive" width="300" height="200" aria-describedby="desc">
</amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div hidden id="desc">
I'm not too sure where this road leads either.
</div>
如果此页面上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的确切用例。
转到 Stack Overflow 一个无法解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。
在 GitHub 上编辑示例-