Could not load the item – but not all images

Hi @champdor

Thanks for getting in touch with us.

We are currently looking into this and I will get back to you once I do have an update on this. Thanks in advance for your patience as we investigate this.

Kind regards,
Elvis.

?

Hi @elviiso,

Did you manage to look into it? We are desperate to get back to the proper workings.

Thank you,
Champdor

Hi @champdor

I’d like to give you a quick update. From our investigations, the issue is that the internal method used to fetch the current item being displayed in FooBox has been affected and is returning the “undefined” error and so the images cannot be opened in FooBox. It’s quite an unusual error.

This is not being caused by any type of cache and that’s why emptying the cache as you were doing did not have any effect. We suspect that the custom slick carousel you created may be the cause of this.

Just to test this before we can proceed further, could you kindly place any of the STGs outside of the carousel and then see if the images will now be loaded in FooBox? Thanks for trying this.

Hoping to hear from you soon. ?

Kind regards,
Elvis.

Hi @elviiso,

A very quick and dirty test shows that without slick the galleries work: domain per test per.

Since the carousel is not needed on the original page since 2,5 slides is always visible from the 3, I will suggest to my client to forget the carousel and put the galleries side-by-side.

On a side note one of the galleries similarly does not work on mobile on the original page even though that’s a separate section for mobile without slick. But I guess the slick.js is loaded anyway and it interferes with Foo.

So if you want we can close the issue without solving the problem.

Champdor

Hi @champdor

I’ve got some more updates on this issue.

I believe that I have found the root cause of the issue, and as mentioned earlier, it’s to do with the slick carousel.

Basically, what’s happening is that there are multiple instances of the same FooBox modal being created. The CSS class?fbx-#?where?#?is a number is the instance identifier.

In the image linked below taken from the Chrome Inspector tool after loading the page you shared with us, you can see multiple FooBox modals with the same ID have been created: https://prnt.sc/j4YLDC0EdFIa

What I realized was happening is that the slick carousel is cloning the items within it so it can loop around as shown in this linked image: https://prnt.sc/9B_N7HMO8F6v

From the linked image above, you can see that there are 3 actual galleries and then 6 cloned galleries. The cloned galleries have had their gallery ID removed which by itself will cause problems but other things like the?rel?attribute on the items are unchanged which will then cause issues for FooBox.?

From all of that, it’s clear that the root cause of the issue is in the slick carousel, and resolving the issue with the slick carousel is outside our scope of support at this moment in time.

Hope this answers your questions.

Kind regards,
Elvis.

Hi @elviiso,

Yes, it perfectly makes sense. Anyway we had much trouble originally to build this unusual idea of the webdesigner. But it seems that there is no solution in the long run.

I already redesigned this page without slick and works fine. Thank you for your time to clarify this issue.

Best regard,
Champdor