Image Viewer opens a full-size image in a focused overlay from a thumbnail, card, or gallery item. Wrap the image group with ngsImageViewer, mark each clickable item with ngsImageViewerPicture, and pass sourceUrl for the full-size image.
The overlay supports close, loading state, zoom in and out, drag/pan when zoomed, and optional title, caption, and description through inputs or Angular templates. Use it for galleries, attachments, product images, media previews, portfolio cards, and other places where a user clicks a preview to inspect the full image.
Do not use Image Viewer for inline zoom inspection without an overlay, editing, crop selection, displayed-width resizing, before/after comparison, plain static images, video previews, or missing image placeholders. Use ImageZoomViewer, ImageDesigner, Crop, ImageResizer, ComparisonSlider, a normal img, VideoViewer, or ImagePlaceholder for those cases.
Key features:
- Opens a full-size
sourceUrlfrom a clickable preview. - Supports title, caption, and description content.
- Includes zoom and drag/pan behavior in the overlay.
- Works with any preview markup inside
ngsImageViewerPicture.