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.
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.
I can suggest to use custom made lightbox. Example of using it you can see here http://saevskaya.webflow.io/gallery-eng
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.
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
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
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
