Image Viewer API

Full surface of oge-image-viewer: its inputs, methods and outputs, the interaction model and the config provider.

Properties Methods Events Types

OgeImageViewer

oge-image-viewer

Name	Type	Default	Description
`images`	`readonly OgeImageViewerItem[] (required)`	—	The gallery. Fields: `src`, `alt` (read out, and shown when the file fails), `caption?` (under the image), `thumbnail?` (a smaller file for the strip, default `src`). A new array keeps the index when it still fits.
`index`	`number (model)`	`0`	The shown image — two-way. Changing image resets zoom, pan and rotation.
`loop`	`boolean \| undefined`	`config ?? false`	Pages from the last image to the first and back (buttons, keys, thumbnails stay direct).
`maxZoom`	`number \| undefined`	`config ?? 8`	Largest zoom factor (8 = 800 %). Zoom steps through 1, 1.5, 2, 3, 4, 6, 8; the wheel and pinch zoom smoothly, always around the pointer.
`thumbnails`	`boolean`	`true`	The thumbnail strip under the image — shown for two images or more; the current one carries `aria-current`.
`toolbar`	`boolean`	`true`	The toolbar: previous / counter / next, zoom out / level / zoom in / fit, rotate left / right and full screen. Without it the keyboard, the wheel, a double click and pinch still work.
`messages`	`Partial<OgeImageViewerMessages>`	`{}`	Per-instance overrides of the config catalog.

Name	Type	Description
`next()`	`() => void`	Shows the next image (wraps only with `loop`).
`previous()`	`() => void`	Shows the previous image (wraps only with `loop`).
`resetView()`	`() => void`	Back to fit: zoom 1, no pan, no rotation.

Name	Type	Description
`indexChange`	`number`	The banana half of `[(index)]`.
`zoomChange`	`number`	The zoom factor changed (1 = fit) — from the toolbar, the keys, the wheel, a double click (fit ↔ 2×) or a two-finger pinch.

Name	Type	Description
`Keyboard`	`role="group", tabindex="0"`	With focus on the viewer: Arrow Left / Right page (they pan while zoomed, as do Up / Down), Home / End and Page Up / Down jump, `+` / `-` zoom, `0` fits, `R` / `Shift+R` rotate and `F` toggles full screen. A polite live region announces each image.
`Pointer`	`drag · wheel · double click · pinch`	While zoomed, dragging pans (clamped so the image never leaves the stage); the wheel zooms, a double click toggles fit and 2×, two fingers pinch. Full screen uses the Fullscreen API and follows `fullscreenchange`, so Esc keeps the state in sync.
`OgeImageViewerItem`	`interface`	One image: `src`, `alt` (read out, and shown when the file fails), `caption?` (under the image), `thumbnail?` (a smaller file for the strip, default `src`).
`OgeImageViewerCore`	`class (@oge-ui/behavior)`	The framework-free state machine both render layers drive: index, zoom, pan, rotation, full screen and the key map.
`OgeImageViewerCoreOptions`	`{ reactivity; messages; onIndexChange?; onZoomChange?; requestFullscreen? }`	What the core takes: a reactivity adapter, the catalog, and the callbacks a render layer wires to its outputs and to the Fullscreen API.
`OGE_IMAGE_ZOOM_STEPS`	`readonly number[]`	The zoom stops of the buttons and keys.

Name	Type	Description
`messages`	`OgeImageViewerMessages`	Every user-facing string: `label`, `previous`, `next`, `zoomIn`, `zoomOut`, `resetZoom`, `rotateLeft`, `rotateRight`, `fullscreen`, `exitFullscreen`, `thumbnails`, `empty`, and the templates `counter` (`{index} of {count}`), `zoomLevel` (`{zoom}%`) and `announce` (`{alt}, image {index} of {count}`, the live-region text). Translated in every `@oge-ui/locales` pack (`layout.imageViewer`).
`loop / maxZoom`	`—`	Defaults for the matching inputs. Pass a function for a live config.

Name	Type	Description
`provideOgeImageViewerConfig`	`(config: OgeImageViewerConfigInput \| (() => OgeImageViewerConfigInput)) => Provider`	Application- or component-scoped defaults; a function makes the config live.
`OGE_IMAGE_VIEWER_CONFIG`	`InjectionToken<OgeImageViewerConfig>`	The resolved config the viewer injects.
`OGE_DEFAULT_IMAGE_VIEWER_CONFIG`	`OgeImageViewerConfig`	The defaults (from `@oge-ui/behavior`).
`OGE_DEFAULT_IMAGE_VIEWER_MESSAGES`	`OgeImageViewerMessages`	The English catalog.
`resolveOgeImageViewerConfig`	`(input?, base?) => OgeImageViewerConfig`	Merges a partial config over a base (the defaults).
`OgeImageViewerConfig`	`{ messages: OgeImageViewerMessages; loop?: boolean; maxZoom?: number }`	Resolved config shape.
`OgeImageViewerConfigInput`	`Partial<OgeImageViewerConfig> with partial messages`	What the provider accepts.
`OgeImageViewerMessages`	`{ label; previous; next; zoomIn; zoomOut; resetZoom; rotateLeft; rotateRight; fullscreen; exitFullscreen; thumbnails; counter; zoomLevel; announce; empty }`	The image viewer catalog.