Skip to main content
Frontend Glossary

UI components · Images

Image Preview

Also called: Lightbox, Image viewer, Photo viewer, Image zoom

The full-screen view that opens when you click a thumbnail. It shows the original image on a dark background, lets you zoom, rotate, and flip through the rest of the set, and closes with Esc or the ✕.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Add an image preview to the photos in product reviews. Clicking any thumbnail opens a full-screen preview layer with an 85% opaque black background that fades in over 200ms. Show the original image in the middle, scaled to fit the screen at no more than 90% of the viewport, and show the thumbnail with a spinner while it loads. Put "3 / 8" at the top left and a 40px close button ✕ at the top right. Center a 48px round arrow button vertically on each side for previous / next. Along the bottom center, add a row of tool buttons: zoom out, current zoom "100%," zoom in, rotate, and download. Support left and right arrow keys to switch, Esc to close, and scroll-wheel zoom, plus pinch-to-zoom and swipe on phones. Lock background scrolling while it's open, and return focus to the clicked thumbnail when it closes.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Image Preview is what you need.

Use Image Preview when

  • Product photos, review photos, and albums where users want to see the details
  • A set of images to flip through one by one, like a portfolio or listing photos
  • Checking an image after uploading it, or viewing images others posted in chat or comments

Pick something else when

  • Decorative images, icons, and avatars on the page, where zooming in adds nothing

    Use insteadImage

  • Images that need cropping, markup, or edits. Use a dedicated image editor.

    Use insteadImage

  • Promo banners that rotate on their own on the home page

    Use insteadCarousel

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Clicking a thumbnail opens the raw image file in a new tab, so users can't find their way back or move to the next image

  2. 02

    The preview has no close button and Esc doesn't close it either, so the only way out is reloading the page

  3. 03

    The preview still shows the blurry thumbnail, which turns into a pixelated mess when zoomed

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A dark overlay, a large centered image, a counter and close button at the top, previous and next arrows on the sides, and a zoom / rotate / download toolbar at the bottom. It can include a row of thumbnails.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

An image preview (also called a lightbox) is the full-screen viewer that opens when you click a small image. The background turns dark and semi-transparent, the large image sits in the middle, the top has a "3 / 8" counter and a close button, the sides have previous and next arrows, and the bottom has tools like zoom out, zoom in, 1:1, rotate, and download. Some also have a row of thumbnails. Product photos, review photos, albums, images in chat, and upload previews all rely on it to see the details.

How it differs from an Image: the image is the picture on the page itself, and the image preview is the viewer that opens after you click it. How it differs from a Modal: a modal holds forms or confirmations that need action, with the page still visible around it. An image preview is just for looking at images, so it fills as much of the screen as it can, dims the background, and skips extra buttons. It's also not a Carousel. A carousel is a set of banners on the page that rotates by itself. An image preview is opened by the user and flipped through by hand.

Load the full-resolution image in the preview, and show the thumbnail as a placeholder while it loads. Show long and tall images in full, scaled to the screen. Support the keyboard (left and right arrows to switch, Esc to close) and touch gestures (pinch to zoom, swipe to switch, swipe down to close). Lock background scrolling while it's open, return focus to the original thumbnail when it closes, and give every image alt text.

Developer info
Term ID
component-image-preview
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-image-preview-root
  • .ant-image-preview-wrap
  • .ant-image-preview
  • .el-image-viewer__wrapper
  • .arco-image-preview
  • .n-image-preview-container
  • .van-image-preview
  • .pswp
  • .lg-outer
  • .fancybox__container
  • .fancybox-container
  • .yarl__portal
  • .yarl__container
  • .PhotoView-Portal
  • .viewer-container
  • .glightbox-container
  • .basicLightbox
  • .lightbox
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • lightbox
  • lightbox-overlay
  • image-preview
  • image-preview-modal
  • image-viewer
  • img-preview
  • photo-viewer
  • image-modal
  • gallery-modal
  • pic-preview
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • ImagePreview
  • ImageViewer
  • ImageLightbox
  • Lightbox
  • PhotoViewer
  • PhotoSlider
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • overlay
  • starts with media
Priority
3 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026