Streaming live at 10am (PST)

Ability to setup dynamic lightbox on template page

Hello everybody,

I have a question for you : how I have to do in order to have a Lightbox gallery that is different between my different pages ?
In fact, I’ve got 6 project pages that each one should have her own lightbox gallery but when I created one, automatically, this same lightbox gallery is duplicated on the other 5 project pages…and when I try to modify 1 gallery on another page, the modification is repercutated on the other galleries…
Could you please help me ?
A great thanks.

Kind Regards,

Here is my public share link:
The pages are those on the “Realisations” part :

Hi @davidferreira1404, thanks for your question. To help check this further, could you share the read-only link to your site?

Thanks in advance!

Sure, here it is :

A great great thanks



Hi @davidferreira1404, thanks a lot for the link.

At the moment, it is not possible to have different lightboxes show up for different collection items (i.e. the “pages” for each project in your site are actually individual collection items shown on one dynamic template page.

I know this probably does not help your immediate need, but in time the dynamic lightbox functionality will be added and I have added this as a wishlist item.

1 Like

Hello @davidferreira1404

I can suggest to use custom made lightbox. Example of using it you can see here
When you click on the picture - opening custom made lightbox. All content is dynamic.

Custom made - I mean made by using Webflow, but not lightbox-widget.
If this kind of lightbox is good for you let me know and I will walk you through the whole process.


Hello @sabanna

I just have seen your work and I think that could be an idea for me, because you have different lightboxes in different pages (one lightbox in the page “2014”, another one in the page “2015”).
I think that could be a solution, so If you agree to give me a little help, that will be awesome.

But the only thing that I am afraid of is that every modification that I make in one of my 6 pages are passed on to all the other pages… so I don’t know If you’re solution could work on my website but it does not cost us anything to try :smile:

A great thanks @sabanna

1 Like

Hi @cyberdave,

Thank you for the information.
Let us know when this new functionality will be added, that could really help me for the future :smile:

Have a nice day,



Ok. Lets start.


Instead of lightbox-widget in every column we will build such structure (build in one column then copy/paste in all other columns)

  • Lightbox = link box (display: block)
    thumbnail = image (width = 100%)

  • modal-popup = div (display: block, position: fixed, height: 100%, z-index: 15000, background: black )
    close-btn = button or link-block with close icon inside (which one you prefer) (position: absolute, align: top-right, margin: 34px)
    img-big = image which will show in big size (position: absolute, depends on how big you want to show this image aligning will be different, I choose height: 70%, margin-left/right: auto, align:top=50%, transform: Y=-50% (it will always keep image in the center))
    img-title = heading (I took h2) (position: absolute, align: bottom, margin-bottom: 30px, text-align: center, color: white


When structure will be done make modal-popup = display:none




Creating interactions for open and close modal-popup.

  1. Create interaction for Lightbox element:
    – trigger - click
    – affect different element - modal-popup (limit to siblings elements)
    – first click - st1 = display: block; st2 = opacity: 100%

  2. Set initial appearance for modal-popup element (through interactions):
    – display: none, opacity: 0%

  3. Create interaction for close-btn element:
    – trigger- click
    –affect different element - modal-popup (no limits!!!)
    – st1 = opacity:0%, st2 = display: none


Now you can copy/paste all this structure (lightbox+modal-popup) to every column. (I used Ctrl+C/ Ctrl+V on my keyboard)

Connect data from current collection/template to images (thumbnail and img-big) :

  • Column 1 = Image 1
  • Column 2 = image 2
  • Column 3 = image 3
  • Column 4 = image 4

Also I connected title to “name” field, just like example if you will want to make that title dynamic. But for that you ill have to create “image title” fields in your database.

In this way every Project template will have its own images - from your database


1 Like

Here is Full instruction tutorial how to use custom lightbox with dynamic content:

Custom lightbox with dynamic content

1 Like

Is this in the pipeline?

This was posted a year ago…