Callbacks let you hook into lightbox events and run your own code when something happens. All four are set as options at initialisation.
onOpen
Fires when: The lightbox opens Parameters: element (clicked DOM element), index (starting index, zero-based)
new Zoomora({
onOpen: (element, index) => {
// Pause a background video
document.querySelector('#hero-video').pause();
// Track with Google Analytics
gtag('event', 'lightbox_open', {
event_category: 'gallery',
event_label: element.dataset.caption || element.alt,
value: index
});
}
});onClose
Fires when: The lightbox closes Parameters: index (index of the active item when closed)
new Zoomora({
onClose: (index) => {
document.querySelector('#hero-video').play();
}
});onNext
Fires when: User navigates to the next item Parameters: index (new current index after navigation)
new Zoomora({
onNext: (index) => {
console.log('Now at index:', index);
}
});onPrev
Fires when: User navigates to the previous item Parameters: index (new current index after navigation)
All Four Together
new Zoomora({
onOpen: (element, index) => console.log('Opened at', index),
onClose: (index) => console.log('Closed at', index),
onNext: (index) => console.log('Forward to', index),
onPrev: (index) => console.log('Back to', index)
});Syncing an External Thumbnail Strip
const thumbs = document.querySelectorAll('.external-thumb');
function updateActiveThumb(index) {
thumbs.forEach(t => t.classList.remove('active'));
if (thumbs[index]) thumbs[index].classList.add('active');
}
new Zoomora({
onOpen: (el, index) => updateActiveThumb(index),
onNext: (index) => updateActiveThumb(index),
onPrev: (index) => updateActiveThumb(index),
onClose: () => thumbs.forEach(t => t.classList.remove('active'))
});