Image viewer

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 sourceUrl from 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.

The NgStarter Angular Image Viewer component lets you open a full-size image in a focused lightbox-style overlay from a thumbnail, card, or gallery item. Use ngsImageViewer on a group and ngsImageViewerPicture on each clickable preview item when users should click a thumbnail or card to inspect a full-size image from sourceUrl. It includes examples for Basic image viewer, Image viewer with caption and description, and Image viewer with title.