Full CMS Lightbox!

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.

http://dream-days.webflow.io

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

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

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

2 Likes

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.

1 Like

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!

1 Like

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.

1 Like

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)

1 Like

Is there a video tutorial somewhere I can watch?


1 Like