Add basic documentation for amp-lightbox-gallery #13272
Conversation
| ## Behavior | ||
| All you need to do is to include the 'lightbox' attribute on an `<amp-img>` or `<amp-carousel>`. A typical usage looks like this: | ||
|
|
||
| ### Lightbox with AMP-IMG |
| </table> | ||
|
|
||
| ## Behavior | ||
| All you need to do is to include the 'lightbox' attribute on an `<amp-img>` or `<amp-carousel>`. A typical usage looks like this: |
There was a problem hiding this comment.
...is to include the extension script and put the lightbox attribute...
| <amp-img src="image2" width=200 height=100 lightbox></amp-img> | ||
| ``` | ||
|
|
||
| The `<amp-lightbox-gallery>` extension automatically inserts an invisible `<amp-lightbox-gallery>` component (with the id 'amp-lightbox-gallery') into the dom. |
There was a problem hiding this comment.
I don't think this is needed, it is very internal implementation details.
| </amp-carousel> | ||
| ``` | ||
|
|
||
| `<amp-carousel>` is considered a lightbox container item. To process an `<amp-carousel>` with the `lightbox` attribute, `<amp-lightbox-gallery>` extension will iterate all of the `<amp-carousel>`'s children, add the `lightbox` attribute and a tap-handler to each child. |
There was a problem hiding this comment.
let's mention the carousel is kept in sync with lightbox gallery
|
|
||
| ### Captions | ||
| Lightbox optionally allows the user to specify a caption for each element. These fields are automatically read and displayed by `<amp-lightbox-gallery>` in the following order of priority: | ||
| - figcaption (if the lightboxed element is a figure) |
There was a problem hiding this comment.
if lightboxed element is a child of a figure
| <amp-img src="image2" width=200 height=100 lightbox></amp-img> | ||
| ``` | ||
|
|
||
| The `<amp-lightbox-gallery>` extension automatically inserts an invisible `<amp-lightbox-gallery>` component (with the id 'amp-lightbox-gallery') into the dom. |
| - `alt` | ||
| - `aria-label` | ||
| - `aria-labelledby` | ||
|
|
| ### Lightbox with `<amp-img>` | ||
|
|
||
| ```html | ||
| <amp-img src="image1" width=200 height=100 lightbox></amp-img> |
There was a problem hiding this comment.
In code samples, attribute values are enclosed in double quotes (e.g., "width="200"). Please apply that standard to your code sample here and below.
|
|
||
| ## Overview | ||
|
|
||
| The `amp-lightbox-gallery` component provides a "lightbox” experience for AMP components (e.g., `amp-img`, `amp-carousel`). When the user interacts with the AMP element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported. |
There was a problem hiding this comment.
I reworded this. Is it only for AMP components or can it be applied to HTML elements too?
There was a problem hiding this comment.
I think we're not quite sure yet. We're currently supporting things on a whitelisted basis, which only includes amp-img and amp-carousel. We should be able to support divs, but my understanding is that AMP doesn't really allow very many raw html elements? E.g. and
I'm open to changing the wording on this so long as we make our support guarantees explicit until we're ready.
* Add basic documentation for amp-lightbox-gallery * Update docs to address comments * Wording cleanup * Add documentation for descriptions * Update amp-lightbox-gallery.md
* Add basic documentation for amp-lightbox-gallery * Update docs to address comments * Wording cleanup * Add documentation for descriptions * Update amp-lightbox-gallery.md
* Add basic documentation for amp-lightbox-gallery * Update docs to address comments * Wording cleanup * Add documentation for descriptions * Update amp-lightbox-gallery.md
Basic documentation for an experimental component
<amp-lightbox-gallery>. The API for styling, thumbnails, and supported elements is still in progress, hence there is only basic usage under an experiment flag.