Jquery help to remove empty thumbnails

Design help Custom code
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");

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

2 Likes
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(); 
 });
1 Like
13

Hi @Diarmuid_Sexton

I could not get your jquery to work…Have you cracked it since your last post? I would be majorly keen to hear about any developments, I see you have tried and suggested a few variations of code snippets. My Js skills are non-existent so I am no help to you unfortunately and have settled for @pepperclip 's handy bit of CSS for now.
Cheers

https://preview.webflow.com/preview/skphotography?utm_source=skphotography&preview=df74f9cc36936ad9e876d004de327134

https://skphotography.webflow.io/

14

You can maybe try something even more straightforward like :

<script>
$(".YOUR-CLASS:has(img[src=''])").remove();
</script>

This removes all elements of a specific class which don’t have a specified image source (therefore should clean up empty thumbnails)

15

Hi @pepperclip this just does not work for me, unfortunately. I probably have set up the lightbox pretty strangely…

I do not have an image src in the html emded code, just an empty link over background images which activates the lightbox. Perhaps this is the reason why I am struggling to locate a specific class to target for this js code snippet.

I have inputted 4 classes hoping 1 would work…

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

Thanks for your help thus far…I may just have to hide the thumbnails altogether…