# Lightbox

> Image with click-to-zoom lightbox. Renders a thumbnail; clicking opens a full-size overlay viewer with backdrop, ESC + click-out to close.

Source: https://ngwr.dev/reference/components/lightbox  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrLightbox } from 'ngwr/lightbox';

@Component({ imports: [WrLightbox] })
export class MyComponent {}
```

## Basic usage

Click the image to open the lightbox. Escape, the backdrop, the × button — or the full image itself, which is styled `cursor: zoom-out` and has to mean it — all close it. The image is a redundant mouse affordance rather than a second tab stop, so nothing new lands in the keyboard path.

```html
<wr-lightbox src="/photo.jpg" alt="Mountain lake" />
```

## Separate thumbnail

Provide a small `preview` URL for the thumbnail and a high-res `src` for the lightbox.

```html
<wr-lightbox
  src="/photo-full.jpg"
  preview="/photo-thumb.jpg"
  alt="Mountain lake"
/>
```

## Caption

Optional caption rendered below the full image.

```html
<wr-lightbox
  src="/photo.jpg"
  alt="Mountain lake"
  caption="Geiranger, Norway — 2023"
/>
```

## Disable preview

Setting `disablePreview` turns off the click-to-zoom behaviour — the image renders as a plain thumbnail.

```html
<wr-lightbox src="/photo.jpg" alt="No-zoom thumbnail" disablePreview />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `openLabel` | Accessible name of the thumbnail button. Falls back to `alt`, then `image.open`. | `string \| null` | `null` |
| `closeLabel` | — | `string \| null` | `null` |
| `src`required | Image source. | `string` | — |
| `alt` | Alt text. Required for a11y; falls back to an empty string. | `string` | `''` |
| `preview` | Lighter source for the THUMBNAIL — a small or blurred copy, so the grid does not pull full-size images. The viewer always shows `src`; the thumbnail does not swap to it later. | `string \| null` | `null` |
| `disablePreview` | Disable the click-to-zoom lightbox. | `boolean` | `false` |
| `caption` | Caption shown under the full image in the lightbox. | `string` | `''` |
| `aspectRatio` | Reserve space before the image resolves by fixing the thumbnail's `aspect-ratio` (e.g. `'16 / 9'`, `'4 / 3'`, or a number like `1.5`). Prevents the layout jump when the intrinsic image size isn't known up front — pair it with a `width` and the box keeps its height from first paint. | `string \| number \| null` | `null` |