| 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 | Annotated code example for amp-lightbox |
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.
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 its 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>The amp-lightbox component can be styled with standard CSS.
The amp-lightbox exposes the following actions you can use AMP on-syntax to trigger:
| Action | Description |
|---|---|
| open (default) | Opens the lightbox |
| close | Closes the lightbox |
<button on="tap:tweets-lb">See Quote</button>
<amp-lightbox id="tweets-lb" layout="nodisplay">
<blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
<button on="tap:tweets-lb.close">Nice!</button>
</amp-lightbox>id (required)
A unique identifer for the lightbox.
layout
Must be set to nodisplay.
scrollable
When scrollable attribute is present, the content of the lightbox can scroll
when overflowing the height of the lightbox.
See amp-lightbox rules in the AMP validator specification.