Support » Plugin: Lightbox with PhotoSwipe » Lightbox Gets Disabled

  • Resolved dhatul

    (@dhatul)


    I have noticed a strange behaviour on my above website. The lightbox works perfectly the first time I open it. However, once I close it I it does not work again unless the page is refreshed.

    I am using Divi theme. I disabled all the plugins except the lighbox to check if there was a conflict with another plugin. Even then the problem persists.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    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

    Plugin Author Arno Welzel

    (@awelzel)

    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.

    Plugin Author Arno Welzel

    (@awelzel)

    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.

    dhatul

    (@dhatul)

    Let me check and revert.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.