Galleries not loading

Hi @rick0316

I had a look at your pages, but the gallery was not FooGallery, it was another gallery called Fotorama

I’m using this code to load the gallery:

<div style="display:none">
[foogallery id="4592" template="thumbnail"]
</div>
<center>
<a class="foobox" rel="lightbox[4592]" href="imagefromthegallery.png"><img src="image_btn.png" alt=""/></a>

@steveush, can you tell why the standalone anchor with class=”foobox” is not working? The HTML looks right

Like I mentioned in the first message, in some cases it works and in some others it does not. You can check the links that I posted last week.

Hi @rick0316,

Unfortunately the way you have setup the links is not the recommended way to open a hidden gallery. Please take a look at the documentation provided here: https://fooplugins.com/documentation/foobox/developers-foobox/open-galleries-in-lightbox-from-text-link/

The way you’re currently opening links relies on chance a bit, which is why sometimes they work and sometimes they don’t. FooBox is picking up the links however that link is a duplicate of one of the items in the gallery and FooBox removes duplicates. So what’s happening here is on one page your link is working as FooBox removed the duplicate from the gallery itself while on the other page it removed the link duplicate.

Thanks
Steve

I did what the article describes but for some reason, the button wont open the gallery, but if I click the thumbnail it does.

https://www.essenzabymauri.com/test/

Hi @rick0316,

Ok I see the issue. In the article the link is just a text link, so when it is clicked the e.target is pointing to the anchor element and the e.target.hash is effectively the gallery ID. In your case you have a img inside the anchor that is being clicked. In the listener the e.target is the img element and so e.target.hash does not exist which causes the lightbox to never be displayed.

There are a couple of ways to fix this:

1. Change the JS snippet to not use the event object to get the element. i.e. Change e.target.hash to this.hash. e.g.

jQuery(function($){
    $(".hidden-gallery-link").on("click", function(e){
        e.preventDefault();
        $( this.hash ).find(".fg-thumb:first").click();
    });
});

or…

2. Make the child elements (the images) within the links non-clickable using some CSS. e.g.

.hidden-gallery-link * {
	pointer-events; none;
}

Thanks
Steve

That works just fine. Thanks for all the help.

Best regards

Rick G.