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-image-lightbox 通过引用灯箱元素的 ID 在 amp-img 元素上使用 on 操作来激活。
<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 上编辑示例-