Instance Methods

Last updated: March 2, 2026

Instance methods let you read the current state of the lightbox, update options after initialisation, refresh the gallery, and cleanly destroy the instance when it is no longer needed.

isOpen()

Returns true if the lightbox is currently open, false if not.

const lightbox = new Zoomora();

if (lightbox.isOpen()) {
  console.log('Lightbox is open');
}

Common use — guard navigation calls:

document.addEventListener('keydown', (e) => {
  if (!lightbox.isOpen()) return;

  if (e.key === 'ArrowRight') lightbox.next();
  if (e.key === 'ArrowLeft') lightbox.prev();
});

getCurrentIndex()

Returns the zero-based index of the currently displayed item. Returns 0 if the lightbox is not open.

const index = lightbox.getCurrentIndex();
console.log('Currently showing item:', index + 1);

Syncing an external progress indicator:

const progressBar = document.getElementById('gallery-progress');

function updateProgress() {
  const current = lightbox.getCurrentIndex() + 1;
  const total = lightbox.getTotalItems();
  progressBar.style.width = `${(current / total) * 100}%`;
}

new Zoomora({
  onOpen:  () => updateProgress(),
  onNext:  () => updateProgress(),
  onPrev:  () => updateProgress()
});

getTotalItems()

Returns the total number of items in the current gallery group. Returns 0 if the lightbox is not open.

const total = lightbox.getTotalItems();
console.log('Gallery has', total, 'items');

Show a custom counter outside the lightbox:

const externalCounter = document.getElementById('my-counter');

new Zoomora({
  showCounter: false,
  onOpen: (el, index) => {
    externalCounter.textContent = `${index + 1} / ${lightbox.getTotalItems()}`;
  },
  onNext: (index) => {
    externalCounter.textContent = `${index + 1} / ${lightbox.getTotalItems()}`;
  },
  onPrev: (index) => {
    externalCounter.textContent = `${index + 1} / ${lightbox.getTotalItems()}`;
  }
});

updateOptions(options)

Merges new options into the current configuration without reinitialising the lightbox. Only the options you pass are updated — everything else stays as it was.

const lightbox = new Zoomora({ transition: 'fade' });

// Switch to slide transition later
lightbox.updateOptions({ transition: 'slide' });

// Update multiple options at once
lightbox.updateOptions({
  closeOnBackgroundClick: false,
  autoHideDelay: 5000
});

Important: updateOptions() does not re-render the lightbox DOM. Options that affect HTML structure — showZoom, showFullscreen, showCounter, showThumbnails, showAutoHideToggle — must be set at initialisation time. Updating them via updateOptions() after init will not hide or show the corresponding elements.

refresh()

Re-scans the DOM and reopens the lightbox at the current item. Useful when gallery items are added or removed dynamically after the lightbox was opened.

lightbox.refresh();

Refreshing after dynamically adding images:

function addImageToGallery(src, caption) {
  const img = document.createElement('img');
  img.src = src;
  img.dataset.src = src;
  img.dataset.zoomora = 'gallery';
  img.dataset.caption = caption;
  img.alt = caption;
  document.getElementById('gallery-container').appendChild(img);

  // Refresh so the new image is included in the lightbox group
  if (lightbox.isOpen()) {
    lightbox.refresh();
  }
}

Note that refresh() only has an effect when the lightbox is open. Images added to the DOM before the lightbox is opened are always included automatically since Zoomora queries the DOM fresh on each open.

destroy()

Removes the lightbox from the DOM, clears all event listeners, and resets the instance. After calling destroy(), the instance cannot be used again — create a new one if needed.

lightbox.destroy();

When to use destroy():

Single-page applications where a component unmounts and the lightbox should be fully removed
Dynamically switching between different lightbox configurations
Cleaning up in test environments

Recreating after destroy:

let lightbox = new Zoomora({ transition: 'fade' });

function switchConfig(newOptions) {
  lightbox.destroy();
  lightbox = new Zoomora(newOptions);
}

switchConfig({ transition: 'slide', showThumbnails: false });

Next Step

Read Keyboard Shortcuts for the full shortcut reference and how keyboard handling works internally.

Quick Links