Don’t know what i did… but looks like its working!
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.
It’ll be something like this
except it’ll be different to that!
figuring it out will help you learn!
Where do i put it? and like it is? or with this " "?
You see i am the perfect weblow designer, no code! !
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.
Hi everyone, I just started using this on a clients website. Is there a way to code out duplicate images from the lightbox?
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?
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 Homesbecomes
Fully-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
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).
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.
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.
Thank you again for the Dynamic Lightbox solution and your help!
No problem, glad I could help
this is the code you’ll need
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:
let me know if you need any more help.
all the best
i tried it like this, but i do something wrong i think?
can you send your webflow share link?
How did you add arrows to go to the next page? Thanks!
Link to previous and next post or page using CMS?
My favorite Sabanna made a great item about it!
go to the link!
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
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!