Hey fellow Webflowers!
I have to give my client a quote for his new website. Of course I want to do it in webflow.
But there is a problem:
They have a lot of projects they want to showcase as a clickable image gallery – preferably a lightbox. And they want to upload every gallery through the CMS.
That’s not possible right now, is it?
Hi you can create lightbox like that :
Ok for you ?
Louis Darques
Hey Louis,
no. I know how to set up a lightbox. But I want to feed it through the CMS so my client can showcase multiple projects with different lightboxes for each project’s images.
A lightbox can be connected to a CMS Collection, whether this makes sense for your use case depends on how you organise the images in your projects (e.g. which fields you create for your projects).
Then, very straightforward:
I want to create a page like this:
https://vier-linden-architekten.de/projekte/neubau.php
A page with many CMS items. One Picture is a preview. When you click on it, you will get a lightbox from a multi-image field in the collection.
It sounds easy. But I don’t seem to be able to make it work. Can it work like this?
You don’t seem to explain what you are having a problem with. Are you using a collection list? See the guide below for more details:
1: I am setting up a collection.
2: I am filling the collection with multiple projects.
3: Every project has a multiple images field where my client could upload pictures for this specific project.
4. I am building a page to showcase all projects.
5. I am adding a collection wrapper in which shows the projects with one image and a description.
Now comes the part which I don’t manage to do.
- Once you click on the project (the image description or the entire div) a lightbox opens with a gallery plus thumbnails that takes all the image from the multiple image field.
- Underneath the thumbnails is a text description from some collection items (year, person etc.).
If you add the lightbox element inside your collection list you should be able to connect your project image fields and configure your lightbox.
What I found out now: you can only do that on collection pages.
And then, the light box is not customisable. So what I’m trying to achieve is not fully possible in Webflow.
Can you share a screenshot of your collection fields (in your collection’s settings) so I can understand what your layout should be?
As I said, I want to build a gallery like this:
https://vier-linden-architekten.de/projekte/neubau.php
But I guess, I will not use lightboxes at all, since they’re not customisable in Webflow. I cannot add a gallery description (like in the link above) nor can I change the overlay colour.