Single Image

Last updated: March 2, 2026

Sometimes you just need to open one image in the lightbox — no gallery, no navigation, no thumbnails. This article covers how to set that up and the small differences in behaviour compared to a gallery.

Basic Single Image

Give the image a unique data-zoomora value that no other image on the page shares. Zoomora detects there is only one item in the group and automatically hides the prev/next arrows and thumbnail strip:

<img src="photo-thumb.jpg"
     data-src="photo-full.jpg"
     data-zoomora="hero"
     alt="Hero photo">

<script>
  new Zoomora();
</script>

The lightbox opens with just the image, close button, zoom button, fullscreen button, and counter (showing “1 / 1”). The counter can be hidden with showCounter: false if you prefer a cleaner look for single images.

Cleaner Look for Single Images

For a single image you may want to hide the counter and auto-hide toggle since they are less useful without a gallery:

new Zoomora({
  showCounter: false,
  showAutoHideToggle: false
});

Note that these options apply globally — if you have both galleries and single images on the same page, hiding the counter affects all of them. If you need different behaviour per image, consider using separate Zoomora instances with different selectors:

// Instance for single hero image — no counter
new Zoomora({
  selector: '[data-zoomora="hero"]',
  showCounter: false,
  showAutoHideToggle: false
});

// Instance for the main gallery — full controls
new Zoomora({
  selector: '[data-zoomora="gallery"]'
});

Single Image with Caption

Captions work exactly the same as in galleries:

<img src="photo-thumb.jpg"
     data-src="photo-full.jpg"
     data-zoomora="hero"
     data-caption="The view from the summit at golden hour"
     alt="Summit view">

When there are no thumbnails (single image), the caption sits lower on the screen since there is no thumbnail strip above it.

Single Image with Zoom

Zoom works automatically on single images — no extra configuration needed. Zoomora checks whether the image is larger than its rendered size and enables zoom if it is.

For zoom to work correctly, make sure:

The data-src points to the full-size image file
The image is not constrained by a fixed HTML width or height attribute (use CSS sizing instead)

See How It Works for a full explanation of how zoom detection works.

Using a Single Image as a Preview

A common pattern is to show a cropped or compressed preview on the page and open the full-size version in the lightbox:

<!-- Small preview on the page -->
<img src="artwork-preview.jpg"
     data-src="artwork-fullsize.jpg"
     data-zoomora="artwork"
     data-caption="Original artwork — click to view full size"
     alt="Artwork preview"
     style="width: 300px; cursor: pointer;">

This is especially useful for product images, artwork, maps, or any content where the detail matters.

Next Step

To add video support to your lightbox, read Video — YouTube & Local. To learn about anchor tag based markup, seeUsing with Anchor Tags.

Quick Links