Hi,
First of all, thanks for the great library.
I’m using Zoomora and noticed a little UX issue: when trying to swipe, users often expect to be able to close the lightbox by clicking on the background area. Currently, Zoomora doesn’t distinguish between clicks on the content background and clicks on interactive elements (image, header, buttons).
It would be nice to be able to integrate this via a Boolean option such as “ClickBackgroundCloseLightBox” or something like that.
For now, I've just written a few lines that seem to work well :
const zoomoraContent = document.querySelector('.zoomora-content');
const zoomoraHeader = document.querySelector('.zoomora-header');
if (zoomoraContent) {
zoomoraContent.addEventListener('click', e => {
if (zoomoraHeader && zoomoraHeader.contains(e.target)) {
return;
}
if (e.target.closest('button')) {
return;
}
if (e.target.closest('img, video, picture, iframe')) {
return;
}
e.stopPropagation();
const closeBtn = document.getElementById('zoomoraCloseBtn');
if (closeBtn) {
closeBtn.click();
}
});
}
CODEPEN : https://codepen.io/dragoweb/pen/GgqQZBP
Hi,
First of all, thanks for the great library.
I’m using Zoomora and noticed a little UX issue: when trying to swipe, users often expect to be able to close the lightbox by clicking on the background area. Currently, Zoomora doesn’t distinguish between clicks on the content background and clicks on interactive elements (image, header, buttons).
It would be nice to be able to integrate this via a Boolean option such as “ClickBackgroundCloseLightBox” or something like that.
For now, I've just written a few lines that seem to work well :
CODEPEN : https://codepen.io/dragoweb/pen/GgqQZBP