Streaming live at 10am (PST)

Full CMS Lightbox!

Hi PixelGeek,

thanks - that’s it

2 Likes

It took me a second to understand the issue so I will take the time to explain it for those who went through the thread and don’t see a solution.

Correct me if I’m wrong but I think the problem started when Webflow removed js that wasn’t being used in a project. So if you never used an actual lightbox in the project then the java script for the lightbox wouln’t load. The work around as Koen said is to add a lighbox into your project page but set the height to 0, I had to set height on the image to 0 as well. That way it doesn’t physically appear on the site but the java script loads.

2 Likes

Thanks for the work. this one really helps me a lot.
Is there possible add more feature in the box? like more description. exterior link, buttons?

1 Like

Hi @oramsdesign! thanks for your tips!, really appreciated.

I’m trying to do the same but including video inside the lightbox, apparently i can´t include the field related to video link onlly images… any thoughts?.

best!.

1 Like

I got a issue that marks won’t show correctly. (’) will showing &#39

1 Like

2 posts were split to a new topic: CMS Lightbox - layout breaking in Firefox

Hello Code Savy Webflowers,

So I have implemented this into my client’s website, I had to take a slightly different route because my gallery coming from multiple image fields from a single collection submission as opposed to referencing multiple submissions to the same collection. It still works, however I hit a roadblock I can’t seem to get around.

My gallery is formed using image submission fields, however they are not required. Some galleries use all 26 image submission fields, but most use far less. In order for my gallery to display correctly, I have conditions on each div set to only be visible if the image is set, therefore if there are only 3 images in the gallery, only 3 images show up and so on. However, even with the condition on the div that is housing my custom code, AND applying the condition to the custom code div itself, for some reason, a blank box for all the images that are supposed to be hidden shows up in my lightbox. I see blank thumbnails for images that are not actually there, and when you try to scroll into or click on one of the blank boxes, you get a spinny thinking wheel that won’t go away.

I’m guessing there is hopefully some additional code I can add that would keep the hidden images hidden within the lightbox, but I’m not a coder, and have no idea where to even start to look for this.

Here’s an example page of one of the galleries that I’m talking about:
http://alanwolfson.webflow.io/artwork/katzs-deli-closing-time

As you can see, this particular piece uses only 12 of the 26 possible detail images, but when you click on a thumbnail and see it in the lightbox, you can see all the blank images that mess up my lightbox.

Any ideas on something I can do to make the lightbox only show the images that are actually there?

Best,

Mitch

1 Like

Hi Mitch

Can you provide the share link. I think in the way you build there might be a way around this. I remember someone having a similar issue maybe. Provide the share link so we can check it out.

1 Like

Hi jbelroux,

Thanks for the response! Here is the share link:

https://preview.webflow.com/preview/alanwolfson?preview=7883a5e38a3f9f3e25fc94518f943382

I should add, the only place I’ve put this new coded lightbox is on the “Diners & Eateries Template” all the other pages have my old self made lightbox, but my client wants the ability to scroll through the images, so my original solution isn’t good enough.

1 Like

Hi Mitch,

Here is how I did it on the blog page. I structured it differently. I think you will run into that problem with the blank images that way. @samliew is kind of a whiz with js webflow stuff. So maybe you could hire him to fix your specific problem.
The other option is to restructure your data.

I have an images collection and then within that, I sort the images to be grabbed dynamically. So it only grabs the appropriate images chosen by blog post. You can see the code in the embed I used. On the blog page or in the post pages.

https://preview.webflow.com/preview/onetriptwovoices?preview=bbbafaec97ca2824e3a9b456412387aa
https://onetriptwovoices.com/blog

3 Likes

Thanks for the info jbleroux. I’ve reached out to @samliew, we’ll see what happens.

2 Likes

I do not understand why this score 16 votes on the wishlist… everybody struggles with it… and is just a 100% need feature…

https://wishlist.webflow.com/ideas/WEBFLOW-I-226

2 Likes

I have nothing useful to add I’m afraid, but that is a really nice site and those sculptures are absolutely incredible! :heart_eyes: :heart_eyes: :heart_eyes:

1 Like

Oramsdesign,

Can you please update your Webflow site link? I’d like to see the project in the designer however your link is bad.

Thanks!

1 Like

@Koen

The problem is running out of votes :frowning:

1 Like

Hello, I know this is an old thread, but is the designer share link for this Lightbox CMS still available?

1 Like

This fixed my issue too. Thank you @PixelGeek

1 Like

Fantastic tutorial.

I’ve just re-built all of the galleries on a clients website and took very little time to do.

I’d previously built it manually so you had to close each image before opening another.

Thank you for this @oramsdesign

1 Like

@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
48

Hope you can help?

1 Like

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.

4 Likes