Streaming live at 10am (PST)

Jquery help to remove empty thumbnails


#1

Hey,

I have an issue whereby I’m populating a lightbox using a cms list and it works fine. However, if some cms fields aren’t populated, a blank thumbnail appears in the lightbox thumbnail list at the bottom of the screen. I’ve made a jsfiddle out of it and I’m looking to find a solution that removes lightbox thumbnail which are empty.

https://jsfiddle.net/diarmuids/atwz8dy1/

Open the JsFiddle and Run. Then click “more photos from the event” to see what I’m talking about

Any help would be greatly appreciated!

Thanks in advance


#2

Hi,

Please check PM,

Regards,
Hayden


#3

Hi @Diarmuid_Sexton,

Could conditional visibility help you there ?
Not sure if that is what you’re looking for though.


#4

Hi @anthonysalamin,

Thanks for taking the time to answer but no - it won’t work in this situation as what I’m using is custom code.

However, I found the jquery

$(":not(.w-lightbox-item:has(img))").remove(".w-lightbox-item");


#5

Well that’s really interesting indeed, thank you for sharing that bit of code !


#6

Hey Man,

thanks for your code! However if I implement it into the embed html,
the Lightbox won’t open anymore. Do you have an idea?

Thanks in advance!


#7

Hi @Diarmuid_Sexton , your piece of code works great in the chrome console but I can’t seem to make it work in my webflow project… I use the lightbox CMS workaround + conditionnal visibility on lightbox links.

Is there something to declare first ? Like to opening of the lightbox for instance ?
I tried adding document ready or window onload but apparently it runs to early…
Where did you inject this snippet for it to work ?

Thanks for sharing the jquery solution anyway :slight_smile:


#8

Hi @pepperclip,

I haven’t done anything special. Be sure to place it in the footer - of either the page or of the entire site - as it uses Jquery and jquery is only loaded at the start of the footer.


#9

Thanks for answering so quickly !

Unfortunately it doesn’t work (either in page custom code or site wide custom code.)

http://chilowe.webflow.io/produits-echoppe/lopinel-x-chilowe

I’ve tried inserting it after the custom code for CMS lightbox in embed and doesn’t work either…
I think I’m missing some simple thing and can’t figure out what…

In the chrome inspector console,
This
$(":not(.w-lightbox-item:has(img))").remove(".w-lightbox-item");
only works when triggered with the lightbox opened. If you trigger it before opening it doesn’t remove the lightbox item like required…


#10

Sorry, I’m sure either. Put it into jsfiddle and play around with it.


#11

Hmm… Ok, thanks anyway.
Since I’ve been trying stuff with no success for a couple of hours, I’m going for a dirty CSS workaround for now which I’ll share for those who might have the same issue as me :slight_smile:

You can just add this

<style>   
 .w-lightbox-thumbnail {
    	background:unset;
    }
    .w-lightbox-spinner {
    	z-index:-1;
    } 
</style>

In order to hide the “empty” item and have the spinner be hidden under the other images.

It doesn’t solve the real problem (which is to hide from CMS lightbox empty items) but it hides it from the user…


#12

For future reference, this works to remove empty thumbnails by removing the lightbox link in the main page if the image src is empty.

DELETE EMPTY LIGHBOXES THUMBNAILS

 $(".lightbox-link").each(function(){    
      if ($(this).find(".lightbox-image").attr("src") === "")         
        $(this).remove(); 
 });