Image viewer

The image viewer component allows users to view and interact with a single or multiple images on a page. It not only presents related images using a gallery experience, but supports zooming and additional details that help users understand the context of the image(s) as well as their relationship to the content of the page.

Component data

Component resources:
SCSS files l zingtouch.min.js | coc.imageviewer.js

Functional grouping: Media


Configure: select the dropdowns below to display the variety of options that an image viewer supports. View the gallery option.

Full image caption



Responsive preview

Usage best practices

Image viewer can support both single and multiple images. When there are multiple images, gallery mode allows users to navigate to the previous and next images while the modal is open.

Consider using an image viewer when:

  • images are at the center of experience of the page i.e. gallery
  • images contain details that help supplement the content
  • zooming or additional content is needed to help users understand the image

Usage examples:

  • showcasing photography or artwork as an album
  • static maps or infographics


Enable filtering or pagination to reduce the page clutter and assist users with finding what they are looking for quicker, unless all images contain critical information that needs to be seen as a whole.

Separate unrelated galleries on different pages or use headings and other spacing components on the same page.

Display additional caption content by default if there is important information.

Keep thumbnail captions succinct to avoid visual clutter (no more than 30 characters).

Ensure that a consistent image ratio is used for all thumbnails (specifically for image viewer with multiple images per row). Typical ratio for thumbnails is 1:1.


Do not show too many thumbnail images at once (keep to one or two rows). This can be visually overwhelming for users to scan through.

Do not put inside a narrow column (especially an image viewer with multiple images). Thumbnails will be difficult to see and the caption text will be illegible.

Do not hide high priority images with pagination. Always put the most important images first.

Do not hide important information inside an image caption. Users may not click on the thumbnail or read the caption so important information needs to be part of the page content.