I hope you don’t mind me tagging you, I hoped you could help me with this solution.
I’ve set up the custom CMS lightbox as shown, and everything works as described however I would like the preview image to fill the div container it sits in. Like a background image that’s set to “cover”, so that on all devices the images sit in perfect alignment, no matter what their original size and without getting distorted.
I’ve tried looking for a solution online but I can’t seem to piece the correct code together.
Just a reminder for anyone trying it and not seeing results. Remember to embed the lightbox widget so webflow generates the required javascript. After this you can then set the lightbox to display none.
@oramsdesign
Thank you kindly for providing this simple solution, exactly what I needed
@Mikeyjay11
Thanks for the critical heads up re: installing the lightbox component on a hidden page which ensures that Webflow launches the needed JS to actually run the darn thing
Is there a possibility to make within the json object an if-else-case?
I would need this if I have 5 images, but only 3 are a must have an the other two are optional.
Thank you soooo much for this! This is the first time a client has requested a gallery from me for a site that I would not be adding images to. Thanks for your good work on this!
I’m sorry but I’m really a noob. I can’t understand anything written here. I tried to copy paste the code and I just can’t get it to work. Can you please help me understand step by step. I’m new to webflow.
If you’ve copied it correctly, don’t forget you need to drop in an actual lightbox element somewhere on the site (you can set it to display: hidden so it’s not seen)
If you go in the projects template page.
I want the images there to be in lightbox, I tried doing a traditional light box but it shows up on every project page.
You currently have the images included in the rich text. You can add a CMS lightbox gallery, but the images wont be clickable from the rich text.
Each image is an HTML embed connected to the CMS… I’m not sure if you saw the OP’s read only link, but it might make more sense if you have a look at it to make sure it’s what you want.
@webflow, @oramsdesign; do you think there is a way insert a facebook button or any link/html embed in there?
I know that i can create a div block to do a “lightbox", but the scroll button and thumbnail at below i tried so many time and could not work in CMS collection.
I think the only way to do this would be to create a custom lightbox using div blocks and interactions. You can then add in whatever content you’d like including a facebook button or html embed.
You can achieve the same affect using the new interactions which is what I recommend – the steps are slightly different but the principles are the same.
