Display options control which UI elements are visible in the lightbox. All five options are true by default — set any to false to hide the corresponding element.
showCounter
Type: Boolean Default: true
Shows or hides the image counter in the top left of the lightbox header (e.g. “2 / 5”).
new Zoomora({
showCounter: false
});
When hidden, the counter element remains in the DOM but is invisible (opacity: 0; visibility: hidden). This preserves the header flex layout so the control buttons on the right stay correctly aligned.
When to turn off:
- Single image lightboxes where “1 / 1” adds no value
- Minimal or immersive gallery designs where the counter feels cluttered
showThumbnails
Type: Boolean Default: true
Shows or hides the thumbnail strip at the bottom of the lightbox.
new Zoomora({
showThumbnails: false
});
When hidden:
- The thumbnail strip is removed from view (
display: none) - The thumbnail toggle button in the header is also hidden
- Captions reposition automatically to sit closer to the bottom of the screen since the space previously occupied by thumbnails is freed
When to turn off:
- Projects where thumbnails feel redundant (e.g. a two-image comparison)
- Mobile-first designs where bottom space is limited
- Lightboxes used for single images
showZoom
Type: Boolean Default: true
Shows or hides the zoom button in the lightbox header controls.
new Zoomora({
showZoom: false
});
Note that hiding the zoom button disables the button UI only — the underlying zoom logic is still active. Users can still trigger zoom via the Z keyboard shortcut or by clicking directly on the image. If you want to disable zoom entirely, you can override the toggleZoom() method or avoid providing high-resolution images.
When to turn off:
- Galleries where images are decorative and zooming is not useful
- Designs with a simplified control set
showFullscreen
Type: Boolean Default: true
Shows or hides the fullscreen button (and its paired exit-fullscreen button) in the lightbox header controls.
new Zoomora({
showFullscreen: false
});
Both the expand and collapse buttons are hidden together since they are a pair — there is no scenario where you would want one without the other.
Users can still trigger fullscreen via the F keyboard shortcut when this option is false.
When to turn off:
- Embedded lightboxes inside iframes or restricted environments where the Fullscreen API is unavailable
- Designs where fullscreen is not part of the intended experience
showAutoHideToggle
Type: Boolean Default: true
Shows or hides the auto-hide controls toggle button in the lightbox header.
new Zoomora({
showAutoHideToggle: false
});
If you want auto-hide to always be active without giving users the ability to toggle it, set both options together:
new Zoomora({
showAutoHideToggle: false, // hide the toggle button
autoHideEnabled: true // start with auto-hide on
});
When to turn off:
- Immersive gallery experiences where auto-hide is always on
- Simplified interfaces where the toggle adds unnecessary complexity
Combining Display Options
Turn off multiple elements for a minimal, distraction-free lightbox:
new Zoomora({
showCounter: false,
showAutoHideToggle: false,
showZoom: false,
showFullscreen: false,
showThumbnails: false
});
This leaves only the close button, prev/next navigation, and captions — the absolute minimum needed to navigate and dismiss the lightbox.
Next Step
Read Behaviour Options to configure transitions, animation speed, zoom scale, and background click behaviour.