A post was split to a new topic: Custom lightbox interactions doesn’t trigger correctly
Unless you manually set a “next image” item in the collection, THEN add a next image (link?) box inside your modal.
Logically it would work. It’s a lot of manual labor. You’d have to wrap the next image in a linkbox, and apply several click moves and hide overflow. Also when you load the modal, it would probably load up every single image and take a while if your collection is large.
Sabanna you’re the expert… would this work?
Another idea is to rebuild the gallery manually and smaller inside the modal and allow clicks. I’m trying this stuff but I’m not awesome at it. My skill with interactions needs to grow.
Great, you saved my life!
Hi Sabanna,
Thanks for your Tutorial. it worked as planned.
One more Question.
I set my “Image-Gallery-Collection” (Stills from a Movie) within a Collection (Movie).
But some Image Galleries will have 8 Images (Max.), some will have 6 or 4… 
How do i get rid of the Placeholder Images in the dynamic list?
Thanks for Sharing.
1 Like
If you have that images inside the dynamic collection there shouldn’t be any placeholders left, CMS automatically generate as many as you have in your collection
Very neat, thanks, I implemented it on a website but now I have another problem:
I put this dynamic lightbox within a CMS Template. Can I filter the lighbox images collection so they match the CMS template collection. I have matching Design and Gallery collections but I can’t make the corresponding Gallery images to show on the lightbox.
Hi Sabana,
Thanks again. And what a fast reply!
Well. I did it like this now.
I made a new Collection with One Image per entry. This works fine. It’s now a kind of MediaLibrary.
My Collection has now a nice Image Gallery from an other collection. Ay!
Thanks!
Previously i made one collection entry with eight Images per entry, which ended with this placeholder images as described before. To fetch all the images of such an entry, i needed to place the total amount of them in my lightbox gallery…
Hi T-Fab, any ideas on how to work around this?
Sure, add a link (called slug by webflow) to your collection item, and use custom code (for example jquery’s load or an iframe) to load the item dynalically into your modal.
Hint: Using an iframe will give you the responsive layout breakpoints for your modal as well.
Thanks man, I’m taking a look into this, I’m trying to implement something simple like @cyberdave made here:
Hello,
Thanks a lot for the tip.
I use this method by adding a tabs component. Now each lightbox can contain multiple images.
Published site: http://collectiontest.webflow.io/
Preview: https://preview.webflow.com/preview/collectiontest?preview=430e787db391821a6a8c325bfaacf259
I have the exact same problem. I have f.e. 10 image uploads in one collection item, which i generate with the following code (10 times):
<a class="w-lightbox" href="#" style="cursor:pointer;">
<img src="foto-10" class="flexphoto">
<script class="w-json" type="application/json">{ "group": "Fotos", "items": [{
"url": "foto-10"
}] }</script></a>
But if foto-10 is not set for example, i can hide it with conditions, but the thumbnails still get set in the lightbox modal. Any ideas how to get rid of those?
Could you, please share a read-only link to your examples?
Thanks in advance.
Anna
Hi Anna,
I’ve ‘solved’ this by removing the image-strip, and by changing the position and by hiding the lightbox-spinner. (because the spinner would show up for images that weren’t added to the CMS.
<style>
.w-lightbox-strip {
display: none;
}
@media (min-width: 0px) {
.w-lightbox-group {
height: 98vh;
}
}
@media (min-width: 0px) {
.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
height: 98vh !important;
}
}
.w-lightbox-spinner {
display: none;
}
</style>
I would be awesome if Webflow could add more customizability to the lightboxes and also connect them to collections.
Hello Sabanna,
Great tutorial! Exactly what I need. I yesterday did all the steps and I got it to work, except for that all items (images and texts) are displayed for all items in the database in the ‘light-box’. The items are placed on top of each-other.
Can you, or anybody else point me in the right direction?
In the image you can see the collection. But when I click on 1 item, it shows the last one in the lightbox. And I can also see that other pictures are loaded. How can I tell Webflow to only display the ‘current’ selected item?
And I also discovered that no matter on which item I click, the Item stays the same: 
First I worked on a standalone page, I’m now working on the collection page, don’t know if that makes any difference.
As you can see in the top of the window, it says Dennis Weber as current Item, that doesn’t change at all if I click on e.g. the picture with the three people on it.
And I also end up with the image of the guy in blue shirt. 
Regards,
Willem
1 Like
Hi, @willemvanleunen!
With the new Webflow interactions the approach might be slightly different, since it was while ago when I created this tutorial.
I will check it out and will be back to you with more information.
Best regards,
Anna
4 Likes
Hi all,
Has somebody managed to create a custom lightbox with previous/next buttons and/or thumbnails and ready to share this?
Thanks in advance.