Is it possible to link a manually created lightbox with a CMS collection?

Hello everyone. This is my first topic within the forum. After searching online and on the forum I could not find an answer to my specific case.

I have recently created my first website with Webflow by customising a purchased template. On the Playground page I have inserted an image gallery in a Mansory-style grid (like Pinterest).

These images are elements of a CMS collection, as you can see in one of the attached screenshots. In ‘Lightbox Image Settings’ I had to set a display limit to 1 (which is why it does not work as I would like, but otherwise Webflow crashes).

I created interactions to make the selected photo appear in the lightbox. The problem is that whichever picture is clicked, only the first one in the CMS Collection list appears in the lightbox.

Is there a possibility of making the image corresponding to the one clicked appear in the lightbox I created? This would already be very useful for me.

Optional question, if I added navigation arrows, would I be able to navigate the gallery from the lightbox itself?

Thank you in advance for taking the time to read my request.
Looking forward to your feedback, I wish you a good day.


Lightbox Component Navigator

Online Website: Playground

My Read-Only Link:

Normally you’d just use Webflow’s lightbox element for this, it’s much easier.

However if you want to use an interactions-based lightbox, the easiest way is to put the lightbox into the collection, and then your click interaction targets it as sibling to make it visible.

I have a cloneable here that shows the same technique with modals.