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