Lately many users been asking about the way to use lightbox with dynamic content. So I decided to move explanation to separate topic. Hope it will be useful.
For use lightbox with dynamic content we will have to create CUSTOM LIGHTBOX and then BOUND DYNAMIC CONTENT TO IT.
Create custom lightbox structure separately from dynamic list.
Create the div (I give it class “item”). Style it as you need/want.
Inside the item div we add linkblock (I give it class “lightbox”) Style it as you need/want.
Inside the lightbox add the image (I gave it class “thumbnail”). Style it as you need/want.
Inside the item div add one more div for lightbox modal window (Igave it class “lightbox-modal”)
- position: fixed
- alignment: full
- height: 100%
- set semi-transparent background color
- z-index should be high enough for cover all content on the site
Inside the lightbox-modal add image (image-big) and close button (close-btn). I used simple button, but you can use link-block with icon. Also you can add image title and discription if you want.
Style all elements inside the lightbox-modal .
image-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: 60%, margin-left/right: auto, align:top=50%, transform: Y=-50% (it will always keep image in the center).
_When styling is done make **lightbox-modal** display:none and opacity: 0%_
Create interactions for open and close lightbox.
- Pick lightbox and create interaction:
– trigger - click
– affect different element - lightbox-modal (limit to siblings elements)
– first click - st1 = display: block; st2 = opacity: 100%
Temporary make lightbox-modal display:block and opacity: 100% for being able set interaction for close-btn
Pick close-btn and create interaction:
– trigger- click
–affect different element - lightbox-modal (no limits!!!)
– st1 = opacity:0%, st2 = display: none
_When setup is done make **lightbox-modal** display:none and opacity: 0%_
Connect Lightbox to Dynamic content
Add Dynamic list and connect it to your Dynamic collection with images.
Copy/paste or move all this structure (div item with lightbox and lightbox-modal inside) inside the DYNAMIC ELEMENT
- Connect data from current collection/template to images (thumbnail and image-big) :
If you have an image title connect it 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
Full video: https://youtu.be/Fue_IP9k6wQ
Published site: http://dynamic-custom-lightbox.webflow.io/