Foo Box Changed order of images, can’t change back

hi @looknsharp

I can see the issue. FooBox should be picking up the anchor tags in your page in the order they are in the HTML source.

@steveush please can you investigate this. Scroll down to “Echo Device Setup Guide” then click the screenshot to open FooBox then click the right arrow button

Hi @looknsharp,

I don’t think changing the file name caused the issue. I believe the issue here is that the rel attributes have changed and FooBox does perform some automatic merging of elements using the same rel.

FooBox is looking to bind to the wp-block-image elements under your device setup guide but they contain a common rel attribute with the images from the above Jetpack Tiled galleries.

FooBox automatically pulls in all images that share the same rel attribute. So what is happening here is that it is binding to the first image under the device setup guide, so it appears first in the lightbox, then it is checking the rest of the page for any other images sharing the same rel attribute and merging them into its contents.

This results in a mismatch of what is seen in the page to what is displayed in the lightbox as the second image appears higher in the page order than the first.

As it stands at the moment in the free version the best bet is to alter the rel attributes for each of the images you have displayed under your device setup heading.

In the Gutenberg editor, once an image is selected, click the “link” button in the top menu, on the right hand side is a drop down arrow and under there you should see the rel option for the image.

You should be able to keep whatever currently exists, I believe it should show external noopener noreferrer at the moment. Just add a unique name for the images you want grouped together in the lightbox. For example you can add lightbox-1 to each of the images so there rel attribute ends up being external noopener noreferrer lightbox-1 and it should resolve the issue.

Thanks
Steve

Thank you so much for your help so far!
I have another page that has a gallery but doesn’t do that with the images.

It “just works” and keeps everything in the order it is in the screen. I was hoping to be able to keep all of the images linked (even the ones in the galleries) and have FooBox use the order they are on the page. Is there any reason it would work the “right” way on this page, but not on the one you checked out?

How can I share the page that works as expected? I tried linking it, but it doesn’t show up in my reply.