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