amp-image-lightbox
Introduction
The amp-image-lightbox
component allows the user to expand an image to fill the viewport.
Setup
Import the amp-image-lightbox component in the header
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Basic usage
The amp-image-lightbox
is activated using the on
action on an amp-img
element referencing the lightbox element's ID.

<amp-img on="tap:lightbox1"
role="button"
tabindex="0"
src="https://amp.dev/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>
Multi image support
It is even possible to show different images in the same amp-image-lightbox
. Here is another image using the same lightbox.
<amp-img on="tap:lightbox1"
role="button"
tabindex="0"
src="https://amp.dev/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>
Caption: figcaption
The amp-image-lightbox also can optionally display a caption for the image at the bottom of the viewport. This can either be the contents of the <figcaption>
element when the image is in the figure tag...
<figure>
<amp-img on="tap:lightbox1"
role="button"
tabindex="0"
src="https://amp.dev/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>
Caption: aria-describedby
... or the contents of the element whose ID is specified by the image's aria-describedby
attribute.
<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="https://amp.dev/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 上的示例-
Written by @sebastianbenz