It seems, Divi brings it’s own lightbox with it. When you click an image, it creates an additional lightbox in the background, which is just not visible, because Photoswipe has a higher Z index. You can see this when using the web developer view of Firefox or Chrome: as soon as Photoswipe opens, there will also be additional elements inserted by Divi at the top of the page:
<div class="mfp-bg mfp-fade mfp-ready"></div>
<div class="mfp-wrap mfp-gallery mfp-close-btn-in mfp-auto-cursor mfp-fade mfp-ready" tabindex="-1" style="overflow: hidden auto;">
...
When you now close Photoswipe using the [Esc] key on the keyboard, the Divi lightbox closes as well since it also reacts on pressing the [Esc] key. However, when you close Photoswipe using the “X” icon or by swiping the lightbox up, the invisible Divi lightbox container is still open and catches all mouse clicks and taps.
I don’t know the Divi theme in detail – but you need to disable its internal lightbox, otherwise it will always cause problems with other lightbox scripts.
Thread Starter
dhatul
(@dhatul)
Hi Arno,
While your observation about it working properly when existed by using escape key is correct, I am using the following to disable the native lightbox –
.mfp-bg.mfp-fade.mfp-ready, .mfp-wrap.mfp-gallery{
display:none !important;
}
But what is surprising that on the staging site
https://donotgive.com/gallery/
which is identical to the production site, this problem is not there and the lightbox reopens correctly irrespective how you close it.
Please have a look
You got me wrong – just adding some CSS does NOT disable other lightboxes! You have to remove the JavaScript code which adds the event handler for the other lightbox.
About the staging side: this does not have the second lightbox enabled. When clicking an image, the other lightbox does not open at all. So whatever is different there – your live site has to be configured the same way.
