Simple Fancybox CMS Gallery with captions (Lightbox alternative)

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.

LIVE SITE

CLONEABLE SHOWCASE

P.S.
It also uses the newly released “nested collections”.

5 Likes

So I changed the photos and they do not show up in light-box thumbnails.

https://fancy-box-gallery-tech-demo.webflow.io/

Here is the share link:
https://preview.webflow.com/preview/fancy-box-gallery-tech-demo?utm_medium=preview_link&utm_source=designer&utm_content=fancy-box-gallery-tech-demo&preview=1926b3623eb8653e8843178a51473039&pageId=5e9f3d07a5c02376cc22eadf&itemId=5e9f3d07a5c023920022eb20&mode=preview

Issue with the image file name - here’s a quick video to show - https://www.loom.com/share/21bdbb7e1206437391b2e39f6961f349

Here’s a batch image converter - really handy for lots of things - including batch renaming files - XnConvert · Batch Image Converter | Image convert | XnView.com

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!

Thank you so much @Diarmuid_Sexton for sharing. Adapted it for my project and it worked like a charm. :bowing_woman:

1 Like

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?

Not with this solution no.

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.

Hello, I hope all is well.

First of all, thank you for the help!

I just implemented the cloneable project into a website I’m working on.

It all works just fine but when using Safari, the image you close the lightbox onto appeared with a light-blue border.

Can you help me get rid of it?

Thank you :slight_smile:

https://preview.webflow.com/preview/evesaintjean?utm_medium=preview_link&utm_source=designer&utm_content=evesaintjean&preview=983f6e3c51c751816ff27bfa322304c4&pageId=61b26ef2cf2ffc11bf5d6d8e&itemId=61b26fdf5519852c624a7f60&workflow=preview

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.

1 Like

Thanks. I did fix it right after I made the post by adding the following line to the custom css field.

a:focus { outline: none; } .nolink:focus { outline: 0 none !important; }