Skip to content

Copy edit #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dgash wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Copy edit #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 12 additions & 23 deletions extensions/amp-image-lightbox/amp-image-lightbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
-->

### <a name="amp-image-lightbox"></a> `amp-image-lightbox`
## <a name="amp-image-lightbox"></a> `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
Expand All @@ -32,26 +30,17 @@ The typical scenario looks like this:
<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` 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 `<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.
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 `<figcaption>` 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.