Image Zoom

A picture that opens in a larger view above the page when it is clicked. The view is a native dialog: it keeps the focus inside, closes with Escape, and gives the focus back to the picture.

General

Describe the picture in alt, which also names the button. The size props are the ones of Image.

Larger image and caption

zoomSrc is a larger version, loaded only when the view opens, so the page stays light. caption goes under the picture.

Gallery

Several pictures, each with its own view. A click on the dark area, or on the close button, closes it.

APIs

ImageZoom.Props

Attribute	Description	Type	Accepted values	Default
src	the picture	`string`	-	-
alt	what the picture shows, and the name of the button	`string`	-	-
zoomSrc	a larger version, loaded when the view opens	`string`	-	`src`
caption	text under the picture in the view	`ReactNode`	-	-
closeLabel	name of the close button	`string`	-	`Close`
...	the props of Image, like `width`, `height` and `style`	`ImageProps`	-	-

Behavior

• Closing: Escape, the close button and a click on the dark area close it. A click on the picture does not.
• Page: it does not scroll while the view is open.
• Size: the picture in the view fits the screen, in the proportion it has.

Ref

The ref points at the button that opens the view.

The picture is a button with aria-haspopup="dialog", named by alt. The view is a modal dialog named by the same text. The focus goes to the close button when it opens, stays inside while it is open, and goes back to the picture when it closes. Always write a useful alt: it is what a screen reader reads for both the thumbnail and the larger picture.

Edit this page on GitHub