diff --git a/extensions/amp-image-lightbox/amp-image-lightbox.md b/extensions/amp-image-lightbox/amp-image-lightbox.md index d2ebee58e787..ff9cd85d3b64 100644 --- a/extensions/amp-image-lightbox/amp-image-lightbox.md +++ b/extensions/amp-image-lightbox/amp-image-lightbox.md @@ -14,13 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. --> -### `amp-image-lightbox` +## `amp-image-lightbox` -The `amp-image-lightbox` component 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. +The `amp-image-lightbox` component allows for an “image lightbox” or similar experience where, on user interaction, an image expands to fill the viewport until it is closed by the user. -#### Behavior +### Behavior The typical scenario looks like this: ```html @@ -32,26 +30,17 @@ The typical scenario looks like this: ``` -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` is activated using the `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. Note that any number of images in the page 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 `
` 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. +The `amp-image-lightbox` can optionally display a caption for the image at the bottom of the viewport, defined as: -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. + 1. The contents of the `
` element when the image is in the `figure` tag. + 2. The contents of the element whose ID is specified by the image's `aria-describedby` attribute. -#### Styling +Among other things, the `amp-image-lightbox` allows the following user manipulations: zoom, pan, and show/hide description. Pressing the `escape` key closes the lightbox. -The `amp-image-lightbox` component can be styled with standard CSS. Some of the -properties that can be styled are `background` and `color`. +### Styling -The `amp-image-lightbox-caption` class is also available to style the caption -section. +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.