Lightbox Gets Disabled

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.

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.

Let me check and revert.