Single thumbnail gallery don’t show the lightbox commands when not in Elementor

Hi @toumigaston22

I’m sorry to learn that the gallery images are being redirected to be opened in a the tab when clicked instead of being opened in the lightbox. I have investigated this and realized that it is being caused by some code added to a Javascript file in Elementor. Let me elaborate further.

The issue is being caused by Elementor’s page transition effect which is interfering with FooGallery’s functionality. When clicking on FooGallery images, instead of opening in a lightbox or behaving as configured, the images are being redirected and opened in a new tab.

The problematic function is part of Elementor’s PageTransition module which is part of the onLinkClick Function shown in this linked image taken from your site: https://prnt.sc/R8KxypC4j141

Here’s the function and below I’ve described what it’s doing:

onLinkClick(e) {
    if (!this.shouldPageTriggerTransition(e.currentTarget))
        return;
    e.preventDefault();
    const t = e.currentTarget.href;
    this.classList.remove(this.classes.entered),
    this.animateState("exiting", this.getPreloaderDelay()).then((()=>{
        this.classList.add(this.classes.exiting),
        location.href = t
    }))
}

This function:
a) Checks if a page transition should be triggered.
b) If so, it prevents the default link behavior.
c) Starts an “exiting” animation.
d) After the animation, it redirects to the link’s href.

The problem about this is that it is catching clicks on FooGallery images and treating them as regular links, which interferes with FooGallery’s intended behavior. To resolve this, you will need to get in touch with the Elementor team and ask them how to prevent this from happening. They do have workarounds that they should be share with you to resolve this.

For a long term solution, I would suggest ask them to modify the?shouldPageTriggerTransition?method to exclude elements that are part of a FooGallery. They could add a check similar to:

shouldPageTriggerTransition(element) {
    // Existing checks...
    
    // Add this check
    if (element.closest('.foogallery')) {
        return false;
    }
    
    // Rest of the existing function...
}

This would prevent the page transition effect from being applied to FooGallery elements, allowing them to function as intended.

This is most likely an issue affecting multiple other plugins too, so kindly ask them to investigate the interaction between Elementor’s page transition effect and other gallery plugins, specifically FooGallery and come up with a better solution that allows Elementor’s page transitions to work for general site navigation while not interfering with the functionality of other plugins.

Thanks.

Kind regards,
Elvis.
CC @steveush

Thanks! I will contact them!