API Overview

Last updated: March 2, 2026

When you call new Zoomora(), it returns an instance with a full set of methods for controlling the lightbox programmatically. You can open and close it, navigate between items, toggle UI states, and inspect or update the current state — all from your own code.

Getting an Instance

Store the return value of new Zoomora() in a variable to access the API:

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

// Now you can call methods on it
lightbox.open(someElement);
lightbox.next();
lightbox.close();

If you initialise without storing the instance — new Zoomora() — the lightbox still works for click-triggered interactions, but you lose the ability to control it programmatically.

When to Use the API

Most projects only need new Zoomora() with some options. The API becomes useful when:

You want to open the lightbox from a custom button rather than a direct click on an image
You need to navigate programmatically — for example, a “next” button outside the lightbox
You want to react to state — check if the lightbox is open before doing something else
You are building a single-page application and need to destroy and recreate the instance when components unmount and remount
You want to update options after initialisation without reinitialising

Method Groups

The API is organised into four groups. Each group has its own article with full details and examples:

Navigation Methods

Open, close, and move between items.

Method	Description
`open(element)`	Open the lightbox at a specific element
`close()`	Close the lightbox
`next()`	Navigate to the next item
`prev()`	Navigate to the previous item
`goTo(index)`	Jump to a specific item by index

See Navigation Methods

Control Methods

Toggle UI states from code.

Method	Description
`toggleZoom()`	Cycle to the next zoom level
`toggleFullscreen()`	Enter or exit fullscreen mode
`toggleThumbnails()`	Show or hide the thumbnail strip
`toggleAutoHide()`	Enable or disable auto-hide controls

See Control Methods

Instance Methods

Read state, update options, and manage the instance lifecycle.

Method	Returns	Description
`isOpen()`	Boolean	Whether the lightbox is currently open
`getCurrentIndex()`	Number	Index of the currently displayed item
`getTotalItems()`	Number	Total number of items in the current group
`updateOptions(options)`	—	Merge new options into the current config
`refresh()`	—	Re-scan the DOM for updated gallery items
`destroy()`	—	Remove the lightbox and clean up all listeners

See Instance Methods

A Quick Example

Opening the lightbox on a custom button click rather than directly on an image:

const lightbox = new Zoomora();

const openBtn = document.getElementById('open-gallery');
const firstImage = document.querySelector('[data-zoomora="gallery"]');

openBtn.addEventListener('click', () => {
  lightbox.open(firstImage);
});

Next Step

Read Navigation Methods for full details on opening, closing, and moving between items programmatically.

Quick Links