Thank you for this. It is a great hack. Hopefully webflow will solve this within their system but I’m going to give this a go following your blog
thanks for your post. That looks exactly like what we are looking for!
Unfortunately, I did not manage to implement it based on the information from your post. Which element should have the class “lightbox_thumbnail_image”?
Do you have the possibility to share a “read-only webflow link” to your website (or to a dublicate version of your website that only contains the cms lightbox)?
That would be great!!!
Thanks a lot and all the best,
did you figure out a way it works for you?
Do I have to change any variables in the JS code?
I have to paste it before tag, right?
No I didn’t figure it out. Michael. It’s not working for me. Maybe I’ll try to email him directly if he doesn’t check these forums. I second that Kristian. It is often easier to figure out with some sort of webflow link thanks
Thanks @waldo , in the example do you see what dynamic item the link block and image are linked to. It seems to duplicate the gallery lightbox and lightbox image.
@michael @Waldo do you think the change from example-bg.png to image-placeholder.svg is making the difference? I can’t figure it out. Might just have to go the long work route and do @sabanna 's lightbox fix
Hi there. Here is the read-only webflow link. I’ll put it up for a limited time, until I create a duplicate site for it:
I assume you have already read my blog post about this as well.
Thank you Kristian your site is great and the effect is awesome.
that’s great stuff!
I (almost) managed to rebuilt your lightbox. Just one thing is missing … how do you manage that only those pictures are shown that are selected in the respective project? You don’t use filters, right?
Thanks a lot!
When I include another reference from the image to the project, I can set the filter to “project is current project” and it works perfectly … but maybe there is an even easier solution (as I can’t find any filter settings in your project) …
Or do I need a …
(1) Multireference in the projects collection to the respective images and
(2) Reference in the image collection to the respective project
(PS: Actually, in my test project … I only need the reference field in the image collection to that I could set a filter to get the relevant images that are linkes to a project. Maybe you your describe how you did the selection, as it seems to be easier to have only one multi-reference field in each project collection :D)
Success! thank you very much. It works like a charm. This will save hours and hours of work and I can easily duplicate it.
It’s great - I love it :D!
How did you filter the relevant pictures for the gallery? And what kind of references do you use in the project and image collection?
@jbleroux Hi Jeremy,
To create the relationship, I created another collection called Gallery Images, which I then refer to as a multi-reference field from Projects. Once that was set up, it was pretty easy to create the gallery, which was done by my non-technical Marketing staff. I know I have a couple of fields remaining in that database that are not used anymore, so I hope those were not too confusing.
So, the main images needed are:
- A Thumbnail Image (a Project item)
- A Fullbleed higher res image (A Project item)
- Gallery Images (Multi reference to the Image Gallery collection)
For data entry, it’s best to add the images to the gallery first before trying to refer to them from the Project.
Using the multi-reference field, I needed no additional filtering.
your lightbox hack is awesome!!!
I still have one issue with the filter using a multi-reference field:
When I add a multi-reference field in the the project collection that includes the relevant images from the image collection - that is not enough to only show those images. All images are shown.
The only solution that works for me so far is to create a single reference field in the image collection that includes the relevant project that the image belongs to. With this single reference, I can create a “project equals current project” filter to show the images that are linked to the relevant project.
Of course, your solution sounds much easier to administrate and I would love to implement your solution …
I selected the wrong collection in the first step … when you create the dynamic list you have to select the multi-reference colletion and NOT the normal image collection.