Skip to content

Latest commit

 

History

History
67 lines (53 loc) · 2.68 KB

amp-lightbox.md

File metadata and controls

67 lines (53 loc) · 2.68 KB
Raw

amp-lightbox

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

Behavior

The amp-lightbox component defines the child elements that will be displayed in a full-viewport overlay. It is triggered to take up the viewport when the user taps or clicks on an element with on attribute that targets amp-lightbox element’s id.

Closing the lightbox

Pressing the escape key on the keyboard will close the lightbox. Alternatively setting the on attribute on one or more elements within the lightbox and setting it's method to close will close the lightbox when the element is tapped or clicked.

Example:

<button on="tap:my-lightbox">Open lightbox</button>

<amp-lightbox id="my-lightbox" layout="nodisplay">
  <div class="lightbox">
    <amp-img src="my-full-image.jpg" width=300 height=800 on="tap:my-lightbox.close">
  </div>
</amp-lightbox>

Styling

The amp-lightbox component can be styled with standard CSS.

Validation

See amp-lightbox rules in the AMP validator specification.