ImageZoom

Installation

Included in the starter. Every new site has it in src/components/ui/image-zoom/. Import it where you need it, or register it in src/components.ts to use it on every page. If your site predates it, install it:

npx @cloudflare/nimbus-docs add image-zoom

yarn nimbus-docs add image-zoom

pnpm nimbus-docs add image-zoom

bunx @cloudflare/nimbus-docs add image-zoom

New sites render <ImageZoom /> once in src/layouts/DocsLayout.astro. Every content image that would show at least 1.2× bigger becomes a button that opens it at up to 95% of the viewport.

Images already about as big as they can get, such as a screenshot on a phone, stay plain. Resizing the window adds or removes the button.

• Keyboard: Tab reaches the image, Enter or Space opens it, and Esc closes it. Focus returns to the image.
• Screen readers: the button is named “Enlarge image: alt text”, and the enlarged image keeps the alt text.
• Motion: the image fades in, and doesn’t animate when the reader prefers reduced motion.
• Linked images and images inside buttons are left alone.

Opt an image out

Add data-nb-zoom="off" to the image, or to any element around it:

<div data-nb-zoom="off">
  ![Architecture diagram](./diagram.png)
</div>

Remove it

Delete <ImageZoom /> and its import from src/layouts/DocsLayout.astro. Images go back to plain images, and the script leaves the page.

Add it to an existing site

npx @cloudflare/nimbus-docs add image-zoom

yarn nimbus-docs add image-zoom

pnpm nimbus-docs add image-zoom

bunx @cloudflare/nimbus-docs add image-zoom

Then render it once in src/layouts/DocsLayout.astro, next to the other dialogs:

---
import { ImageZoom } from "@/components/ui/image-zoom";
---

<ImageZoom />