amp-image-lightbox
简介
通过 amp-image-lightbox 组件，用户可以将图像扩展到充满视口。
设置
在标题中导入 amp-image-lightbox 组件
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
基本用法
使用 amp-img 元素上的 on 操作激活 amp-image-lightbox，该操作引用灯箱元素的 ID。
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
多图像支持
甚至可以在同一个 amp-image-lightbox 中显示不同的图像。这是使用同一灯箱的另一张图像。
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Hovawart.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="600" height="400"></amp-img>
标题：figcaption
amp-image-lightbox 还可以选择在视口底部显示图像的标题。这可以是图像位于 figure 标签中时 <figcaption> 元素的内容...
<figure>
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
<figcaption>Border Collie.</figcaption>
</figure>
标题：aria-describedby
...或者是由图像的 aria-describedby 属性指定的元素的 ID 的内容。
这是一只边境牧羊犬。
<amp-img on="tap:lightbox1" role="button" tabindex="0" aria-describedby="imageDescription" alt="Picture of a dog" title="Picture of a dog, view in lightbox" src="/static/samples/img/Border_Collie.jpg" width="300" height="246"></amp-img>
<div id="imageDescription">
This is a border collie.
</div>
需要进一步解释吗？
如果此页面上的说明未能解答您的所有问题，请随时与其他 AMP 用户联系，讨论您的具体用例。
转到 Stack Overflow 未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您针对您特别感兴趣的问题做出一次性贡献。
在 GitHub 上编辑示例-