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.
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?
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.
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.
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.
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)