▼
Streaming live at 10am (PST)

Ability to setup dynamic lightbox on template page

Design help Animations & Interactions
#1

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,
David.

Here is my public share link: http://all-sky-site-75dc4a.webflow.io
The pages are those on the “Realisations” part :
http://all-sky-site-75dc4a.webflow.io/portfolio/divers-projets
http://all-sky-site-75dc4a.webflow.io/portfolio/projet1
http://all-sky-site-75dc4a.webflow.io/portfolio/projet-2
http://all-sky-site-75dc4a.webflow.io/portfolio/projet-3
http://all-sky-site-75dc4a.webflow.io/portfolio/projet4
http://all-sky-site-75dc4a.webflow.io/portfolio/projet5

Gallery with CMS?
Looking to add a gallery within a blog post in collections
#2

Hi @davidferreira1404, thanks for your question. To help check this further, could you share the read-only link to your site? http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance!

#3

Sure, here it is : https://preview.webflow.com/preview/all-sky-site-75dc4a?preview=2d39748cf117b3b67916c6f0a585a542

A great great thanks

++

David

#4

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
#5

Hello @davidferreira1404

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.

Regards,
Anna

#6

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
#7

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,

++

David

#8

Ok. Lets start.

STEP 1

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

s2.png238×718 19.9 KB

  • 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

**

Video: https://drive.google.com/file/d/0B-7cg8BSq1Z_d1RwTE1fNlJrb1U/view

Using the CMS to populate the lightbox media list
How can I make Lightbox with inside images pulling from dynamic list?
#9

STEP 2

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

#10

STEP 3

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

video: https://drive.google.com/file/d/0B-7cg8BSq1Z_MnJGbUdRaG5vTms/view

1 Like
#13

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

Custom lightbox with dynamic content

1 Like
#14

Is this in the pipeline?

This was posted a year ago…