Don’t know what i did… 
but looks like its working!
1 Like
Ok, update:
Some Products have only 1 Photo.
When the gallery has only 1 Photo, i changed “considions” with “Visible when photo is set” But even then, the thumbnails are comming in emty.
1 Like
You need to run some javascript to delete the code where img src=""
It’ll be something like this
$('.gallery-lightbox-link:not(:has(.lightbox-thumbnail-image))').remove();
except it’ll be different to that!
figuring it out will help you learn!
1 Like
Thanks Diarmuid_Sextion!
$(‘.gallery-lightbox-link:not(:has(.lightbox-thumbnail-image))’).remove();
Where do i put it? and like it is? or with this " "?
You see i am the perfect weblow designer, no code! !
1 Like
Hey @Koen, glad you got it working! Had a quick look, not sure what the issue might have been, but at least it’s going now! 
I can’t help much with the tabs part though sorry. But it seems that @Diarmuid_Sexton has you covered there.
1 Like
Hi everyone, I just started using this on a clients website. Is there a way to code out duplicate images from the lightbox?
https://preview.webflow.com/preview/suncoastredesign?preview=d528fc55a501d09eb35865df468319e2
I need to have 3 preview images on the front (Home) Gallery that are linked to the main Dynamic Galleries. In order to get the effect that I wanted I had to check the “Limit Items” in my Dynamic list options to just 1 of 1.
By doing that I had to create a hidden Section with 3 Dynamic Lists within the gallery page with the same embed minus the 1 of 1. This allowed me to add all of the images that would be shown when a visible lightbox embed was clicked.
Edit: Also for whatever reason I cannot get the whole gallery to display when clicking on the home pages mini gallery. Do I need to hide another dynamic list gallery on that page or can I reference the Gallery page?
Thanks,
Cody
1 Like
Hi Cody,
That’s certainly an odd issue. I haven’t seen that happen before. I’m not certain what’s causing it, but here’s a couple of things for you to try:
- Remove the
"_id": "57e0683ebfc7a6d0523235b2",line from the HTML embed - Change your gallery group names to have no spaces. EG
Fully Staged HomesbecomesFully-Staged-Homes- I don’t know if that makes a difference or not, but it could possibly read spaces as multiple groups. - You can also remove the
"cdnUrl":line, I’ve found it works without this one.
The only lines within the script that you should need are type, caption, and url. You can see that in action on my example page which has the latest version of this setup on it.
Try those and let me know how you go.
Also as a note, if you want all three of those galleries to show up in the same lightbox, they all need to have the same group name. If on a page you want several galleries to all display together, just manually set the group to something like “gallery” rather than using a dynamic field. Using a dynamic field for the group name is only if you want multiple lightbox galleries on the same page but don’t want them to show up together in the lightbox popup (like on my example page).
2 Likes
Thank you for such a quick response. It really helps since I have a deadline coming up soon.
Hmm, I changed the embed to reflect what you suggested but it didn’t seem to change anything.
~Cody
1 Like
I think the thing screwing up the gallery layout is your hidden section you mentioned. Here’s an example of what’s happening:
Gallery 1 is displaying only the FIRST of 10 images.
Gallery 2 (hidden) is displaying ALL images.
So the combined display is: 1 1 2 3 4 5 6 7 8 9 10
The first one is shown twice because you’ve got it displayed in BOTH gallery 1 & 2.
You have the gallery 1 dynamic list set to Start at 1, Limit to 1 which is correct.
However Gallery 2 should be set to Start at 2, Limit to 100, that way it won’t be displaying the 1 image in each gallery.
Let me know if that fixes it.
2 Likes
Success!
Thank you again for the Dynamic Lightbox solution and your help!
~Cody
1 Like
No problem, glad I could help
1 Like
this is the code you’ll need
$('.w-lightbox:has(img:not([src]))').remove();
or if you use a class on the “embed element” HTML (i.e. lightbox-embed), then to remove the empty lightbox thumbnails, you would use the following code:
$('.lightbox-embed:has(img:not([src]))').remove();
let me know if you need any more help.
all the best
1 Like
Hi Diarmuid,
i tried it like this, but i do something wrong i think?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
1 Like
can you send your webflow share link?
1 Like
Link to previous and next post or page using CMS?
My favorite Sabanna made a great item about it!
go to the link!
1 Like
insert this piece of code into the footer code of you website - in the custom code tab in site settings
<script> $('.w-lightbox:has(img:not([src]))').remove(); </script>
let me know how that goes
1 Like
You are the greatest!
i put at first on the footer code in the page script, and that did not work!
Now it works!
Thanks Diarmuid! Many Many thanks!
1 Like
Hey, just a heads up. With the new javascript enhancement implemented, if you are using this dynamic solution then you have to have the lightbox component installed on one of your pages or a hidden page. Otherwise the javascript won’t launch and this lightbox will be rendered useless. Just a quick discovery, hope it helps!
6 Likes