I am facing a problem with lightbox functionality on my site. In the Bricks theme editor, both individual images and galleries with lightbox work perfectly. However, when accessing the published URL of the site, the lightbox stops working and the images simply open as links in a new tab.
Observed behavior:
In the Bricks theme customization environment (editor), images with lightbox and galleries configured work flawlessly.
At the published URL, any image (either in a gallery or individual) to which the lightbox is applied does not respond as it should. Instead of opening in a lightbox, the image link opens in a new browser tab.
Technical details:
I have inspected the generated code and noticed that the bricks-lightbox class, which seems to be required to trigger the lightbox script, is present in the editor but does not always appear in the published version of the images or galleries.
The problem occurs in all the images to which I try to add the lightbox, not only in the dynamic galleries.
I use LiteSpeed Cache, but the problem persists even after clearing the cache.
What I have tried:
Clear LiteSpeed and browser cache.
Temporarily disable LiteSpeed Cache and Cloudflare CDN.
As a side note 1 week and a half ago it was working perfectly but now it has stopped working so I don’t know if there is an incompatibility between LiteSpeed Cache and Cloudflare CDN.
As additional information 1 week and a half ago it worked perfectly but now it has stopped working so I do not know if there is an incompatibility with a plugin that has been updated automatically.
I have already found the solution and I want to share it in case someone else faces this problem and does not know how to solve it.
The problem occurs when images with lightbox get “buggy” on click if you have the “Page Exit” trigger enabled in Motion Page. The solution is to use the trigger exclusion setting with the following:
.bricks-lightbox,#my-menu.no-animation
I will explain how this solution works so that anyone can replicate it:
1. For single images:
If you use an image element and select a photo from the media library (i.e. not a gallery), you just need to include .bricks-lightbox in the “Classes to exclude” field of the Page Exit trigger in Motion Page. This will solve the problem automatically for those images.
2. For dynamic galleries such as those created with ACF (Picture 2):
In the case of galleries that load images dynamically from ACF or another source, the problem is that the .bricks-lightbox class is not in the link directly, but in a parent container. This is where you need the second part of the solution:
Step 1: Assign the ID (#my-menu) to the gallery.
Step 2: Add also the .no-animation class to the gallery.
Step 3: In the Motion Page settings, add #my-menu.no-animation along with .bricks-lightbox in the “Classes to exclude” field.
Result:
By following these steps and setting .bricks-lightbox,#my-menu.no-animation in Motion Page, you will prevent images (both individual and galleries) with lightbox from getting buggy when clicked. At the same time, all the links on your site will still work with the “Page Exit” animations.
Looking at the images I have posted I hope it is clearer.
I hope this explanation helps anyone who is facing this problem. If something is not clear, I will be happy to clarify it.
