Image Zoom Viewer gives an inline image a Medium-style zoom interaction. Wrap the image with ngs-image-zoom-viewer and mark the image with ngsImageZoomViewerImage. When the user clicks it, the component clones the same image into an overlay and animates it from its current page position to a larger centered view.
Use it in articles, product pages, portfolios, documentation screenshots, and image-rich content where users should quickly enlarge one inline image without opening a full gallery viewer. It closes on backdrop click or Escape and recalculates the zoom on window resize.
Do not use Image Zoom Viewer for thumbnail galleries with full-size source URLs, titles, captions, or descriptions; use ImageViewer. Do not use it for image editing, crop selection, displayed-width resizing, before/after comparison, static images, or placeholders. Use ImageDesigner, Crop, ImageResizer, ComparisonSlider, a normal img, or ImagePlaceholder for those cases.
Key features:
- Click an inline image to zoom it into an overlay.
- Animates from the image's current page position.
- Recalculates zoom level on window resize.
- Closes with Escape or backdrop click.