Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Image Zoom viewer

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.

The NgStarter Angular Image Zoom Viewer component lets you give an inline image a Medium-style click-to-zoom overlay animation from its current page position. Use ngs-image-zoom-viewer around a normal image marked with ngsImageZoomViewerImage when users should quickly enlarge one inline image without a gallery structure. It includes examples for Basic image zoom viewer.

Basic image zoom viewer

Click an inline image to zoom that same image into a centered overlay, then click outside it or press Escape to close.

Medium-style Image Zoom

Click the image below to see it zoom to full screen.

Forest

Another example with a different aspect ratio:

Lake