I completely stuck. I’m sure that it’s easy and obvious, but I’ve sped few hours (!) and still cant clear empty fields…
I guess I’m not referring to the correct element in the jqure ‘Footer Code’. Could you explain it to me, like to 5 year old kid.?
Which element should be named ‘gallery-lightbox-embed’ #1 or #2? I’ve tried both few times. And do I understand correctly that name equals class name?
If you follow home>work>montauk (or any other collection) and click on the image this presents a lightbox bound to the CMS (collections). The empty images show on the thumbnails of the lightbox, but also cause the lightbox to error and continually try to find that image, showing the loading icon.
I have pointed the jquery to the specific embed element class “html-embed-lightbox” and put in the footer of the site level custom code, but it still not getting rid of the empty images. Any help would be massively helpful.
@oramsdesign@Diarmuid_Sexton
I have successfully created the custom CMS Lightbox using the mentioned method.
However, I have some extra thumbnails showing up in the lightbox. Is there a way to hide them?
Like setting a conditional visibility?
I have 10 images field for the gallery collection. But not all projects will required to upload 10x images. Thus, I need to hide the thumbnails that is empty.
First image is the pop up light box. Second image is the custom HTML embed component.
A little like yourself I trigger the lightboxes via links (empty links over the top of background images) There is a maximum of 6 links on the collection / dynamic page over 6 background images, so when you hover over the bkg images you fire the lightbox…and then there are 4 more hidden lightboxes to satisfy any overflow images, so the client can put 1 -10 images into the cms.
I am struggling to understand how to target the empty images from the CMS as perhaps I do not actually have a class to target in the way I have set this up?
I have added all classes into this script that I have…Any help would be greatly appreciated.
Are you able to publish the page that you are working on?
Would be easier to check if you can share both read-only designer link and the published page link.
Meanwhile, you can try to replace your custom code to the following first.
I just figured out your problem. The reason why the script is not working for you is because your HTML embed that trigger the lightbox is not from an image but a link with background image instead.
From my understanding, how this script works is that it search for the img tag within these class. If img src equal to blank, it will remove this class and link before firing up the lightbox. Thus, the empty thumbnails will be removed before the lightbox is displayed.
Thanks @Sketchz_Lab for your determination to help me here!
I have copied your instructions as closely as I can but still no cigar!
Please follow this read only and live part of the site as I have made a website copy to test out your build structure.
Most importantly I have added img src’s to all the hidden lightboxes, and put the correct js code in the body of the page, but it’s still not working…? very strange I cannot replicate this…
…Webflow team…this has cost me days of fiddling about with this. Surely designers do not need to go through this strain, this lightbox CMS functionality needs to be standard out of the box especially if you want to design photography websites!
Hi Guys,
So i have just finished designing this on my site but i am slightly confused.
I am sure it is a very easy solution.
If i am using this CMS gallery but want the photos to match the page, (as of course every page is going to have to hold different photos) how can this be done? Collections are limited to 20 (40 business plan) so does that mean i have to limit my project like webflow limits our designers?
This solution only works if every cms item has the same amount of images.
An example would be:
Having a cms collection of items where most of them have 2 images, yet some have 3 images.
This causes the last image to create an error on the pages with only 2 cms images. The json runs with continuous looping when clicking item #3 from the cms collection is because it is considered null.
Since json isn’t able to be parsed as javascript there’s no clear way to create an if statement script for the JSON Dictionary object.
Hi Sketchz_Lab,
I know this is an old topic, but here in 2020 I still have problems with CMS lightboxes. Maybe you can shed some light.
I have a CMS Template page that houses dynamic lightboxes. Using the standard method, I can see no way to apply a dynamic caption to the lightboxes that are created. I attempted to use jQuery to insert the entry after the tag, but could never get it to work.
I would like to be able to use the CMS entry NAME as the caption for each lightbox (only becoming visible when opened in lightbox, not thumbnail).