Streaming live at 10am (PST)

Full CMS Lightbox!


#83

@PixelGeek @samliew @bartekkustra

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.

Share link:
https://preview.webflow.com/preview/dream-days?preview=459d14cede6f287a0342d4b23725eaf1

Current code

Hope you can help?


#84

Very helpful post thank you!

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.


#85

@oramsdesign
Thank you kindly for providing this simple solution, exactly what I needed :star_struck:

@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 :+1:


#86

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.


#87

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!


#88

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.


#89

Hi @Scientist_X

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)


#90

Is there a video tutorial somewhere I can watch?



#91

There isn’t that I know of…

If you can share your read only link I’ll have a look at doing a screencast of how to implement it for you with your own site.


#92

That’d be really helpful @magicmark
here -
https://preview.webflow.com/preview/scientist-x-designs?preview=e66df5c45bb19c28c71f242b46d8d99b


#93

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.


#94

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.

https://preview.webflow.com/preview/od-webflowtips?preview=fce826f5bbc82db1b3c139d411b30f01


#95

I’ll seperate the images from the rich text once I get the lightbox working.


#96

Hey there,

i implemented the code on a collection page. it is working, but the images on the bottom are duplicated.


am i missing something, or is it just not possible to use that script on a collection page?


#97

Does anyone know if its possible to add a hover element that reveals titles on the embed element or a workaround this?


#98

does anybody know how to change the code to lightbox vimeo videos? i was able to take it as far as this but the vimeo video wouldn’t load. :frowning:



#99

I would be very interested, too.


#100

@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.
https://developers.facebook.com/docs/plugins/share-button/


#101

@adollei

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.

Here’s how you can build a pop modal using legacy interactions: https://university.webflow.com/article/popup-modal-in-webflow-using-interactions

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.


#102

do you know anyway that can create a thumbnail or left/right control button with in a single modal?