This demo shows how to use the fancybox 3 plugin. It’s slightly different to the lightbox - and I’ve set it up to show captions for CMS galleries which the Webflow lightbox doesn’t do yet. The gallery only works on the published site.
So, I can see that the file name that is giving the issue is still the same is still the same -
Great%20Road%20(webflow)%2002.jpg - the brackets around webflow are causing the issue.
You probably need to resize or modify the images slightly so Webflow uploads a new copy of the image to it’s server with the new filename. If it detects that only the filename has changed - it will use the old file with the old filename to avoid duplicating files unnecessarily.
Try that and see if it works. Or try new images altogether with no brackets in the filename!
Thanks @Diarmuid_Sexton it works well. The nesting potentially allows for bundling galleries separately in the lightbox but haven’t figure that out. A good thing to note is that webflow only allows the first 5 images in each to be viewed in a nested collection. Took me about an hour before I saw that note in webflow. So I will create a full gallery on the template pages. Couldn’t achieve the real hover I wanted because the “gallery” multi-images don’t have other accessible properties than captions. But this is a good workaround for now. And nesting affects interactions.
I managed to visually not have every image show by giving the parent element a size and setting overflow to hidden. There is probably a programically way of doing it but I haven’t figured that out.
@Diarmuid_Sexton
There wouldn’t happen to be some way I can enable some sort of viewer “comment”, “like” or simply a “select” functionality to that gallery, would there?
That multi-image field is really useless with the CMS functionality it only works effectively on the individual collection template page. Otherwise it has that 5 image limit in a nested collection. And isn’t accessible through multi-reference.
Yes, the light blue border is some Safari styling - you might be able to edit it by changing the focused or pressed state of that image within Webflow or by using custom CSS.