Dynamically populated lightbox

Design help Custom code
1

Hi Everyone,

I would like to populate a lightbox with dynamically loaded images from a third-party API. I receive the data fine from the API, and the thumbnails populated just fine. But if I click on the thumbnail it wants to download the image instead of open in lightbox.

Is anybody has any idea, how can I fix this?

Thank you in advance!

Luca

Here is my site Read-Only:
https://preview.webflow.com/preview/flexilets-emergency?utm_medium=preview_link&utm_source=designer&utm_content=flexilets-emergency&preview=b59478c73f61df986a2ecc63c5da9e2c&pageId=6694f840a9955d9d2bedccd2&workflow=preview

2

Lightboxes generate a chunk of JSON to support the lightbox UX, so if you’re modifying the lightbox elements after page load, you’ll likely need to re-initialize them.

You can research the forums for anything related to IX2 re-initialization, you’ll find some related techniques there, but here’s my best guess for lightbox without investigating it.

Webflow.require('lightbox').ready();
3

Thank you. I am already re-initalizse the IX2. As you suggested, and it isn’t helping. I tried to search in forums, but couldn’t really figure this out. Can you help?

4

Best advice I can give is use a more capable lightbox. I usually license Fancybox | Fancyapps UI - Robust JavaScript UI Component Library

5

Actually the code I guessed was exactly right.

You can see it in action here- the images and lightboxes are being dynamically created, and then I re-init lightboxes.

https://sa5-elements.webflow.io/create-lightboxes

Make sure you’ve created your lightboxes properly and completely before you re-init.

6

Thank you. I looked at your example, but I couldn’t figure out what should I do differently.

Can you help me create the lightbox properly and completely? As you said my code is right, so I assume the lightbox initialization is not right then?

I created a lightbox in the visual builder to initialize it. What else should I do?

Thank you in advance!

7

Yes if you need some professional work done, you can click my name to message me and I can send you my rates.

I haven’t investigated your code, but as you can see in my demo dynamic lightboxes and resetting them works fine, so the most likely issue is timing. Your code need to run completely, pre-create the lightboxes correctly, then run reset so Webflow.js can build what it needs for them to function.

8

Thanks, you gave me a hint.
For me what was missing was this line after populating the lightbox with the images:

Webflow.ready();

Now it is working.

1 Like