Streaming live at 10am (PST)

Full CMS Lightbox!

Hi @Diarmuid_Sexton

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.? :slight_smile:

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?

Ps. Page with gallery is ‘Lista szydeleks Template’ and my project is here:
https://preview.webflow.com/preview/nanichete?utm_source=nanichete&preview=7412df6be27de743bb08beaac3aab035

Thank you in advance for any suggestion,

This is great! Is there any way to make this so that it dynamically applies to individual CMS items.

I have a CMS Collection for my work portfolio. I sometimes have photos as part of the work presentation, but it’s normally only video.

I’d like to create a way to pull in 9 photos in a grid that has a thumbnail and full res image through lightbox.

I’ve done:

  1. Created a Photo Collection CMS Collection that I can upload Photo 1, Thumbnail 1, Photo 2, Thumbnail 2, etc.
  2. I’ve created a CSS Grid, inside of it, I’ve placed the workaround that you referenced here, modifying the code for each grid item.

Problem is, I can’t find a way to isolate the items to pull from a specific collection item under the Photo Collection I created.

Any ideas?

Hi Diarmuid,

I have tried to input your jquery code snippet and unfortunately, it does not do the job for me.
https://preview.webflow.com/preview/skphotography?utm_source=skphotography&preview=df74f9cc36936ad9e876d004de327134
https://skphotography.webflow.io/collections/montauk

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.

$(".html-embed-lightbox:has(img[src=''])").remove();

Cheers for your time in advance!

You need to put an image in each of the embeds in order for the jquery to detect that there’s is no image there and then delete the item.

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

I found out that this class “w-condition-invisible” will be able to hide the thumbnail.
Is there anyway to append this using script? Need help~! :dizzy_face:

Try this jQuery $(".w-lightbox-thumbnail:empty").remove();

Try this jquery in the footer

<scrip>
$(".html-embed-lightbox:has(img[src=''])").remove();
</script>

Check the class names and setup as in the below image. Each lightbox needs it’s own html embed.

My lightbox is triggered by a button at the moment. Can the extra thumbnails be hidden using this method?

I finally able to setup this CMS Lightbox using this method.
However, my CMS Lightbox is activated using only a single button.

Here’s how I did it:

  1. Use a DIV box to create a button using the @oramsdesign method. Instead of img tag, I used normal text. This is to trigger the first image.
  2. Create another DIV box to wrap the others CMS lightboxes.
  3. Hide the CMS lightboxes DIV.
  4. Then using @Diarmuid_Sexton script, I am able to remove the thumbnails based on conditions.

Screenshots below for your reference:

Button created using HTML Embed component with @oramsdesign CMS Lightbox method. (Trigger to open lightbox and populate first image.)

Create a div box to wrap the remaining lightboxes. Hide it from the page.
image

Add in @Diarmuid_Sexton script to remove empty thumbnails based on conditions.

End result. Perfect CMS Dynamic Lightbox.

Thanks @oramsdesign and @Diarmuid_Sexton :smiley:

hi @Sketchz_Lab Great that you solved this issue! I have tried to replicate your work this afternoon and can’t get my example to work annoyingly…
https://preview.webflow.com/preview/skphotography?utm_source=skphotography&preview=df74f9cc36936ad9e876d004de327134
https://skphotography.webflow.io/collections/barbie#top

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.

Hi, @kohru.

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.

$(".w-inline-block.w-lightbox:has(img[src=’’])").remove();

Replace it with the code above in your “Collections Template”.

Hi, @kohru.

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.

$(".w-inline-block.w-lightbox:has(img[src=’’])").remove();

As for your case, the script couldn’t find the img tag in your code as you created it as background image instead. So, the script doesn’t work.

Below is my sample:

I’m not an expert coder. So, some explanation might be not accurate. :sweat_smile:
Hope this helped you to understand better how it works.

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…

https://preview.webflow.com/preview/skphotography-5856f570603b403fd500efca5?utm_source=skphotography-5856f570603b403fd500efca5&preview=57d8a4b05d32fbb7053a8fffbe97795b&pageId=5cac5428efbaef8102467746&itemId=5cac5428efbaef1961467782

https://skphotography-5856f570603b403fd500efca5.webflow.io/collections/barbie
(barbie page has 6 images + 4empty images from the cms)

…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! :frowning:

Just as an update - friend helped me with this problem, and solution is:

<script>
    var elements = document.getElementsByClassName("w-condition-invisible");
console.log(elements.length);
    while(elements.length > 0){
console.log(elements[0]);
        elements[0].parentNode.removeChild(elements[0]);
   }
</script>

Hi, @kohru
Sorry for the late reply.

Try the following:

  1. Give a group name to all of the lightbox images. (same group name)

  2. Remove “cdnURL” for all the lightbox images.

  3. Remove Conditional Visibility for all the hidden lightbox images.
    image

  4. Apply the same to all the hidden lightbox images.
    image

  5. Remove the spacing after .w-inline-block.
    image

Let me know if that works.

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?

Thanks for you help in advance.