Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
ZH
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe
  • email

amp-image-lightbox

在 playground 中打开

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...

Border Collie.
<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.

This is a border collie. 
<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 上编辑实例