AMP

amp-image-lightbox

Provides a lightbox effect for a specified image.

Required Script <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Supported Layouts nodisplay
Examples See AMP By Example's amp-image-lightbox sample.

Behavior

The amp-image-lightbox component provides a lightbox experience for a specified image. When the user clicks the image, the image displays in the center of a full-viewport lightbox.

Typical usage

The following is a typical example using an amp-image-lightbox:

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
<amp-img
  on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="image1.jpg"
  width="200"
  height="100"
></amp-img>

When the user clicks the image, the <amp-img> activates the <amp-image-lightbox> via the on action, which references the ID of the <amp-image-lightbox> element (i.e., lightbox1). The <amp-image-lightbox> then displays the image in the center of the full-viewport lightbox. Note that the amp-image-lightbox element itself must be empty and must be set to layout=nodisplay.

Among other things the amp-image-lightbox allows the following user manipulations: zooming, panning, showing/hiding of the description. Pressing the escape key on a keyboard closes the lightbox.

Using a single lightbox for multi