Skip to content

Latest commit

 

History

History
94 lines (79 loc) · 3.95 KB

amp-image-lightbox.md

File metadata and controls

94 lines (79 loc) · 3.95 KB

amp-image-lightbox

Description Allows for a “image lightbox” or similar experience where upon user interaction, an image expands to fill the viewport until it is closed again by the user.
Availability Stable
Required Script <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Examples everything.amp.html

The following lists validation errors specific to the amp-image-lightbox tag (see also amp-image-lightbox in the AMP validator specification:

Validation Error Description
TAG_REQUIRED_BY_MISSING Error thrown when required amp-image-lightbox extension .js script tag is missing or incorrect.
IMPLIED_LAYOUT_INVALID The only supported layout type is NODISPLAY. Error thrown if implied layout is any other value.
SPECIFIED_LAYOUT_INVALID The only supported layout type is NODISPLAY. Error thrown if specified layout is any other value.

Behavior

The typical scenario looks like this:

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

The amp-image-lightbox is activated using on action on the amp-img element by referencing the lightbox element's ID. When activated, it places the image in the center of the full-viewport lightbox. Notice that any number of images in the article can use the same amp-image-lightbox. The amp-image-lightbox element itself must be empty and have layout=nodisplay set.

The amp-image-lightbox also can optionally display a caption for the image at the bottom of the viewport. The caption is discovered as following:

  1. The contents of the <figcaption> element when image is in the figure tag.
  2. The contents of the element whose ID is specified by the image's aria-describedby attribute.

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

Styling

The amp-image-lightbox component can be styled with standard CSS. Some of the properties that can be styled are background and color.

The amp-image-lightbox-caption class is also available to style the caption section.