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,

1 Like

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?

1 Like

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!

1 Like

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.

1 Like

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

1 Like

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

1 Like

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.

1 Like

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

1 Like

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:

1 Like

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.

1 Like

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

1 Like

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.

1 Like

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&amp;preview=57d8a4b05d32fbb7053a8fffbe97795b&amp;pageId=5cac5428efbaef8102467746&amp;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:

1 Like

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>
1 Like

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.

1 Like

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.

1 Like

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.

  <script class="w-json" type="application/json">
{
  "group": "(your-group-name)", "items": [{
    "_id": "57e0683ebfc7a6d0523235b2",
    "cdnUrl": "(image-field)",
   "type": "image",
   "url": "(image-field)"
  },{
    "cdnUrl": "(image-field2)",
   "type": "image",
   "url": "(image-field2)"
  },{
    "_id": "57e0683ebfc7a6d0523235b2",
    "cdnUrl": "(image-field3)",
   "type": "image",
   "url": "(image-field3)"
  }]
}

1 Like

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

Below is a read-only link for my gallery.
Showcase Gallery (Forged)

Thanks,
ben

2 Likes

@ethanfenton I’m having this trouble too - the ampersands are reverting to ASCII. Did you manage to find a fix to this?

Hey Liv,

I think I did solve it but have no clue how I did as it was so many years ago. Feel free to reverse engineer it from my project. The share only link is this: https://preview.webflow.com/preview/seawalltrail?utm_medium=preview_link&utm_source=dashboard&utm_content=seawalltrail&preview=e25dfeea2c269406180339b33952ab78&workflow=preview

Warmly,
Ethan

1 Like