How to build a custom Lightbox from a cms gallery

Hi, everyone,

I would like your help to do exactly the same thing, here is a link https://www.tylermitchell.co
I’d like to create the same popup with the rest of the images and manage it all from a collection.

How do you think I can manage all this with a CMS?

Merci beaucoup !


1 Like

The CMS and image grid’s easy, drop a collection, link to your gallery. Drop a Lightbox Element in the Collection list item. On Lightbox Settings bind Media to the Image in the Collection List, below that give the lightbox group a name like Gallery, now all the lightbox elements in the collection list are linked to one another. Click on the thumbnail and bind that to the image in the Collection list. Then it’s styling. Style the list element by setting it to Flex, horizontal with direction wrap. Align x to space between and y to stretch. This part I’m just making up and you have to tweak that, but then style the image to have a height and width is auto in this example, and you’re done with the grid.

Then you apply some custom styling to the lighbox elements you wanna change, like:

<style>
/* Hide the lightbox strip */
.w-lightbox-strip {
    display: none !important;
}

/* Customize the lightbox backdrop */
.w-lightbox-backdrop {
    background: rgba(255, 255, 255, 0.7) !important; /* Dreamy white with 70% opacity */
    backdrop-filter: blur(5px) !important; /* Soft focus with a 5% blur */
}
</style>

Again, just winging this, but here’s a cloneable to play with.
I just took a very quick stab at styling to show the grid, image and styled lighbox, so obviously that needs to be tweaked a lot, but it shows you can custom style a lightbox, grid and have the content come from the CMS pretty easily as a proof of concept.

Hi J8kes ! thank you for your help and investment, however I think it’s slightly more complex because each image in the grid represents a project, each project is made up of several different photos, with the possibility of sliding to see the photos of the project.

By the way, it’s impossible to put text in a Lightbox, isn’t it?

I’m sorry if this isn’t clearly explained, but I invite you to take a good look at the site I shared above. If you have a solution, it would be great!

Mechanically, the grid is just a big gallery of each project’s primary photo, and when clicked the lightbox shows project-specific photos.

If you’re OK with a 5-photo limit per project, you could build that using a nested list and a lightbox that is grouped at the project level.

You can display captions as well;

J8kes has some great ideas on the styling there- but if you can’t make Webflow’s lightbox work for your use case, you could use 3rd party one like Fancybox.

If the 5-item limit is NOT ok, then you need to get a lot more creative and put in a lot more work. All of your individual photos ( and captions ) would need to be emitted into the page in collection lists and then you’d need to do your layout and lightbox aggregations in code.

Should be possible, but remember that collection lists are limited to 100 items apiece, so you’ll need to have several, ranged, in order to construct this performantly.

thank you for your help, yes indeed I didn’t specify it but there will be more than 5 photos per “album”! But thanks for your help, if you have an idea for this complex problem, I’d love to hear from you!

I’d approach it as I described above and probably use Fancybox for the lightbox code. Easier to manage the grouping and the discrete lightbox initialization.

I see! Could you help me make this? I don’t think I’m strong enough to do it alone :sweat_smile: if you want of course

I’ll drop you a message with my details.

Have you considered using something like WordPress with a plugin for image galleries and popups?

no its better with Webflow here

hi everyone, i found a clone close to what i would like!

However, he put embed with URL link from CMS, do you know if it is possible to replace the code that is in the embed “hidden” by a link to “multi-image” from CMS?

Hi! I’ve made a lot of progress on my problem, but I’m still having a little trouble. If anyone wants to help me, here are the links and infos:

To make it simple, I have a large image gallery, when I click on one of the images, I’d like each image to hide a (custom) slider with other images, like a photo album.
For example, the first image is a rabbit, and when I click on it, I want another rabbit image. Of course, everything has to be added from the CMS. I currently have a script (not very clean) but it works only halfway, there are bugs, in short I’d like another solution, simpler and more functional. (if possible)

here’s a site that does what I’d like to reproduce: https://www.tylermitchell.co

Do you think this is possible?
I plan to have over 700 photos in the gallery, so the collections will be duplicated and then combined.

https://preview.webflow.com/preview/test-36651c-3b340435776503d28ec3ae27849?utm_medium=preview_link&utm_source=designer&utm_content=test-36651c-3b340435776503d28ec3ae27849&preview=bf6f249eb72f3168d04037fb67a73db6&locale=fr&workflow=preview

Thanks a lot! Help!

1 Like