Custom lightbox with dynamic content

Hi, @Klio_Peng!

I am happy that my tricks were useful.

Unfortunately, by using this method there is no way to switch between items while lightbox is open :confused: I am sorry

Cheers,
Anna

1 Like

@sabanna Thanks for putting this together! It works great for me except that when I click on my Lightbox thumbnail the page jumps to the top each time. I suspect it’s the Modal spreading up across the entire site’s height… However it’s the same code that you used. Maybe you can help me spot the issue? (I also tried Lightbox-modal height 100vh FYI)

Here’s the dev site: http://aurora-borealis-yukon.webflow.io/tour/aurora-borealis-at-northern-lights-resort-spa

Thanks for your or anyone else’s help!

@sabanna, this is awesome, thanks you for the tutorial. Got a question for you.

I want to add dynamic content from a collection to a lightbox, but I don’t want multiple collection items in the lightbox. Instead, I want each collection item on a page to open its detail content in a lightbox (as opposed to having each collection item open its content on a unique page).

Does this make sense? Is there a way to do this?

Hello, @crisp_thoughts

This tutorial showing exactly same concept that you want to have. If you want to have something more than only image “inside the lightbox” just add that elements into the lightbox-modal

Cheers,
Anna

A post was split to a new topic: Custom flex lightbox with CMS

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… :slight_smile: 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. :slight_smile:

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. :slight_smile:

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?

Hi, @icexuick and @prohaska!

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: image

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. :frowning:

Regards,
Willem

1 Like