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 上编辑示例-