Installation
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.
<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.
<wr-lightbox
src="/photo-full.jpg"
preview="/photo-thumb.jpg"
alt="Mountain lake"
/>Caption
Optional caption rendered below the full image.
<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.
<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 |
srcrequired | 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 |