Image Gallery

Last updated: March 2, 2026

This article covers everything you need to build image galleries with Zoomora — from a basic two-image group to a full layout with thumbnails, captions, and mixed image sizes.

Basic Gallery

Group images together by giving them the same data-zoomora value. Zoomora automatically handles navigation, thumbnails, and the counter:

<img src="photo-1-thumb.jpg"
     data-src="photo-1-full.jpg"
     data-zoomora="travel"
     alt="Mountain at sunrise">

<img src="photo-2-thumb.jpg"
     data-src="photo-2-full.jpg"
     data-zoomora="travel"
     alt="Forest path">

<img src="photo-3-thumb.jpg"
     data-src="photo-3-full.jpg"
     data-zoomora="travel"
     alt="Coastal cliffs">

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

Clicking any image opens the lightbox at that image. Prev/next arrows and the thumbnail strip let users navigate the full group.

Using Thumbnails vs Full-Size Images

Always provide a smaller image for src (shown on the page) and the full-size version for data-src (opened in the lightbox). This keeps your page fast while delivering full quality in the lightbox:

<!-- Good — separate thumbnail and full-size -->
<img src="images/photo-thumb.jpg"
     data-src="images/photo-full.jpg"
     data-zoomora="gallery"
     alt="Photo">

<!-- Also works — same image for both, but slower page load -->
<img src="images/photo-full.jpg"
     data-src="images/photo-full.jpg"
     data-zoomora="gallery"
     alt="Photo">

The src image is also used as the thumbnail inside the lightbox strip at the bottom. Using a small thumbnail there keeps the strip loading fast.

Adding Captions

Add data-caption to any image to display a caption in the lightbox. Captions are per-image — some images in a gallery can have captions and others can go without:

<img src="photo-1-thumb.jpg"
     data-src="photo-1-full.jpg"
     data-zoomora="nature"
     data-caption="Early morning mist over the valley"
     alt="Valley mist">

<img src="photo-2-thumb.jpg"
     data-src="photo-2-full.jpg"
     data-zoomora="nature"
     alt="Forest path">
<!-- No caption on this one — that's fine -->

Captions slide in from the bottom when present and disappear when the image has none, so the layout adjusts automatically.

Multiple Galleries on One Page

You can have as many independent galleries as you need on a single page. Each data-zoomora value is its own separate group:

<!-- Gallery 1: Landscapes -->
<img data-src="lake.jpg" data-zoomora="landscapes" src="lake-thumb.jpg" alt="Lake">
<img data-src="mountain.jpg" data-zoomora="landscapes" src="mountain-thumb.jpg" alt="Mountain">

<!-- Gallery 2: Portraits -->
<img data-src="person-1.jpg" data-zoomora="portraits" src="person-1-thumb.jpg" alt="Portrait 1">
<img data-src="person-2.jpg" data-zoomora="portraits" src="person-2-thumb.jpg" alt="Portrait 2">

Clicking a landscape image opens only the landscapes gallery. Clicking a portrait image opens only the portraits gallery. They never mix.

Single Image (No Gallery)

For a standalone image with no navigation, give it a unique data-zoomora value that no other image shares:

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

Zoomora detects there is only one item in the group and hides the prev/next arrows and thumbnail strip automatically.

Grid Layout Example

Zoomora works with any CSS layout. Here’s a typical gallery grid:

<style>
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
  .gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
  }
</style>

<div class="gallery-grid">
  <img src="photo-1-thumb.jpg" data-src="photo-1-full.jpg"
       data-zoomora="grid-gallery" data-caption="Caption one" alt="Photo 1">
  <img src="photo-2-thumb.jpg" data-src="photo-2-full.jpg"
       data-zoomora="grid-gallery" data-caption="Caption two" alt="Photo 2">
  <img src="photo-3-thumb.jpg" data-src="photo-3-full.jpg"
       data-zoomora="grid-gallery" alt="Photo 3">
  <img src="photo-4-thumb.jpg" data-src="photo-4-full.jpg"
       data-zoomora="grid-gallery" alt="Photo 4">
</div>

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

Mixed Image Orientations

Zoomora handles landscape, portrait, and square images in the same gallery without any configuration. Each image fits within the lightbox viewport using object-fit: contain, so nothing is cropped.

Zoom availability is checked independently per image — a large landscape image in the same gallery as a small square image will offer zoom while the small image won’t, all automatically.

Tips for Best Results

Use CSS for image sizing, not HTML attributes. Avoid width="250" or height="200" directly on <img> tags. Fixed HTML dimensions can interfere with Zoomora’s zoom detection. Use CSS classes or inline styles instead:

<!-- Avoid this -->
<img width="250" height="200" data-src="photo.jpg" data-zoomora="gallery" alt="">

<!-- Do this instead -->
<img style="width:250px;" data-src="photo.jpg" data-zoomora="gallery" alt="">
<!-- Or better, use a CSS class -->
<img class="gallery-thumb" data-src="photo.jpg" data-zoomora="gallery" alt="">

Always provide alt text. Zoomora uses the alt attribute as a fallback when no caption is provided, and it matters for accessibility.

Keep data-zoomora values simple and consistent. Use lowercase, hyphenated strings like "travel-2024" or "product-shots". Avoid spaces or special characters.

Next Step

To include videos alongside images in your gallery, read Video — YouTube & Local. For anchor tag based markup, see Using with Anchor Tags.

Quick Links