Skip to content
Get Started

Quick Links

Gallery Documentation GitHub Dribbble

Using with Anchor Tags

Last updated: March 2, 2026

By default Zoomora works with <img> tags using data-src and data-zoomora attributes. But if your existing markup uses anchor tags — for example a linked thumbnail pattern common in WordPress themes and CMSs — Zoomora supports that too via the static Zoomora.bind() method and the useHref option.

The Anchor Tag Pattern

Instead of reading the full-size image from data-src, Zoomora reads it from the href of the anchor tag:

<a href="photo-full.jpg" data-lightbox="gallery">
  <img src="photo-thumb.jpg" alt="Photo 1">
</a>

<a href="photo-2-full.jpg" data-lightbox="gallery">
  <img src="photo-2-thumb.jpg" alt="Photo 2">
</a>

Initialising with Zoomora.bind()

Use the static Zoomora.bind() method to initialise for anchor tag markup. Pass the CSS selector for your anchor tags as the first argument:

Zoomora.bind('a[data-lightbox]');

This is equivalent to:

new Zoomora({
  selector: 'a[data-lightbox]',
  useHref: true
});

Both approaches work identically — Zoomora.bind() is just a convenience shorthand.

Grouping with data-lightbox

Images are grouped by the value of data-lightbox. All anchors sharing the same value form a gallery:

<!-- Gallery 1 -->
<a href="landscape-1.jpg" data-lightbox="landscapes">
  <img src="landscape-1-thumb.jpg" alt="Landscape 1">
</a>
<a href="landscape-2.jpg" data-lightbox="landscapes">
  <img src="landscape-2-thumb.jpg" alt="Landscape 2">
</a>

<!-- Gallery 2 -->
<a href="portrait-1.jpg" data-lightbox="portraits">
  <img src="portrait-1-thumb.jpg" alt="Portrait 1">
</a>

Zoomora also supports data-gallery as an alternative to data-lightbox for projects that use that convention:

<a href="photo-1.jpg" data-gallery="my-gallery">
  <img src="photo-1-thumb.jpg" alt="Photo 1">
</a>
<a href="photo-2.jpg" data-gallery="my-gallery">
  <img src="photo-2-thumb.jpg" alt="Photo 2">
</a>

Initialise the same way:

Zoomora.bind('a[data-gallery]');

Adding Captions

Add data-caption directly to the anchor tag:

<a href="photo-full.jpg"
   data-lightbox="gallery"
   data-caption="Golden hour at the coast">
  <img src="photo-thumb.jpg" alt="Coastal photo">
</a>

Adding Video Support

Video works the same way with anchor tags — add data-type="video" to the anchor and set href to the video URL:

<!-- YouTube via anchor tag -->
<a href="https://www.youtube.com/watch?v=VIDEO_ID"
   data-lightbox="media"
   data-type="video"
   data-caption="My video">
  <img src="video-poster.jpg" alt="Video">
</a>

<!-- Local video via anchor tag -->
<a href="videos/clip.mp4"
   data-lightbox="media"
   data-type="video">
  <img src="video-poster.jpg" alt="Video clip">
</a>

Using Custom Options with bind()

Pass an options object as the second argument to Zoomora.bind() to customise behaviour:

Zoomora.bind('a[data-lightbox]', {
  transition: 'slide',
  showCounter: true,
  closeOnBackgroundClick: true,
  onOpen: (element, index) => {
    console.log('Opened item', index);
  }
});

All standard Zoomora options are supported.

Migrating from Other Lightbox Plugins

If you are migrating from Lightbox2 or a similar plugin that uses data-lightbox attributes, Zoomora’s anchor tag support is designed to be a drop-in replacement. In most cases you only need to:

  1. Remove the old lightbox CSS and JS
  2. Add Zoomora’s CSS and JS
  3. Call Zoomora.bind('a[data-lightbox]')

Your existing data-lightbox, data-title, and markup structure can stay as-is. Note that Zoomora reads captions from data-caption rather than data-title — rename those attributes if you want captions to carry over.

Next Step

For WordPress-specific setup including how to enqueue Zoomora and use it with the block editor and Elementor, read WordPress Integration.

On This Page