The auto-hide feature automatically fades out the lightbox controls — header, thumbnails, captions, and navigation arrows — after a period of user inactivity, creating a distraction-free, immersive viewing experience.
How It Works
When auto-hide is enabled, Zoomora starts an idle timer when the lightbox opens. If the user doesn’t move the mouse, touch the screen, or press a key within the configured delay, controls fade out. Any activity immediately brings them back and restarts the timer.
autoHideEnabled
Type: Boolean | Default: false
new Zoomora({ autoHideEnabled: true });When false (default), controls are always visible and the user can optionally enable auto-hide via the toggle button. When true, auto-hide starts active immediately on open.
autoHideDelay
Type: Number | Default: 3000
new Zoomora({ autoHideEnabled: true, autoHideDelay: 2000 });Recommended values: 2000 for photography portfolios, 3000 for general use, 5000 when users need time to read captions.
showAutoHideToggle
Type: Boolean | Default: true
new Zoomora({ showAutoHideToggle: false });Hides the toggle button so users cannot change the auto-hide state during a session.
Common Patterns
Always-on, no user control:
new Zoomora({ autoHideEnabled: true, autoHideDelay: 3000, showAutoHideToggle: false });User-controlled (default behaviour):
new Zoomora({ autoHideEnabled: false, showAutoHideToggle: true });Disabled entirely — controls always visible:
new Zoomora({ autoHideEnabled: false, showAutoHideToggle: false });Toggling Programmatically
const lightbox = new Zoomora();
lightbox.toggleAutoHide();