Streaming live at 10am (PST)

Custom lightbox with dynamic content


#1

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.


STEP 1

Create custom lightbox structure separately from dynamic list.


1) Create the div (I give it class "item"). Style it as you need/want.
2) Inside the item div we add linkblock (I give it class "lightbox") Style it as you need/want.
3) Inside the lightbox add the image (I gave it class "thumbnail"). Style it as you need/want.

4) Inside the item div add one more div for lightbox modal window (Igave it class "lightbox-modal")
5) Style 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

6) 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.

7) 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%_


STEP 2

Create interactions for open and close lightbox.


1) Pick lightbox and create interaction:

-- trigger - click
-- affect different element - lightbox-modal (limit to siblings elements)
-- first click - st1 = display: block; st2 = opacity: 100%

2) Temporary make lightbox-modal display:block and opacity: 100% for being able set interaction for close-btn

3) 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%_


STEP 3

Connect Lightbox to Dynamic content


1) Add Dynamic list and connect it to your Dynamic collection with images.

2) Copy/paste or move all this structure (div item with lightbox and lightbox-modal inside) inside the DYNAMIC ELEMENT

3) 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

Read-only link: https://preview.webflow.com/preview/dynamic-custom-lightbox?preview=999824fdde461ac3a61ca14af0a101de

Published site: http://dynamic-custom-lightbox.webflow.io/


Lightbox with CMS items
Ability to setup dynamic lightbox on template page
Connecting CMS and Lightbox
List items in a Dynamic Collection? Lightbox with CMS? Embedded code? SEO?
Component Lightbox integrating with CMS
Image Gallery lightbox
Carousel Cycle Pages or Images with Text tied to them
Custom CMS Lightbox Not Opening Correct Image
Load portfolio item on same page in modal
Custom lightbox from dynamic content
Use video lightbox in dynamic list
Lightbox link from Portfolio items
Modal displays dynamic content in preview, but things get messed up when published 😐
Light box connect to dynamic collection?
#2

Hi @sabanna,

Thanks for another awesome and super helpful post! I followed all your instructions step-by-step, and got it to work! Well, almost :no_mouth: For some reason, although my Image_Big is connected to my Dynamic images, the image isn't actually showing up. It's showing up in the thumbnails, but not in the big images. Would you mind taking a look at my read-only link to see if you can spot the problem, please?

My read-only link:
https://preview.webflow.com/preview/kunal-jaura-photography-2739b6?preview=03398e161e2bcfdade8fd164006a7890

Also, is there a way to connect all my Lightboxes to produce arrows at the left and right of each big image, so the user has the option of clicking through all the 'big images' as opposed to having to close the modal window every time?

Thanks!
Ruheene


#3

Unfortunately, no :unamused:

There is some issue with settings panel for images now. There is no option "Take IMAGE from collection and by mistake you checked Background Image. Here is a video how to connect images https://youtu.be/uKUUN58Vec0

Just be patient, because you have a big collection some steps can feel like a freezing, just wait a minute or so.

Regards,
Anna


Z-index issue with custom lightbox with CMS
#4

Thanks so much, @sabanna! I totally confused 'image' with 'Background Image', and your fix fixed everything :blush:

Bummed to know I can't have arrows like regular lightboxes do, though. If I can't create them using the Webflow interface, do you know if there's any way to add an extra snippet of code somewhere (the Editor?) to make it happen?

Also, is there a way to add an interaction where if there is a modal window open, a user could simply click anywhere outside of the modal window to close it instead of having to look around for the Close button?

Thanks!
Ruheene


#5

No, I am sorry. :pensive: My coding knowledge is not so deep, so can't even imagine now to do this. Especially that images are dynamic.

You can apply close interaction to modal background itself. Then user can click anywhere and it will close "lightbox"

Cheers,
Anna


#6

Thanks @sabanna! Wouldn't this close the modal window whenever the user clicks anywhere inside the modal window itself? I'm hoping to create the opposite- to have the modal window close when the user clicks anywhere outside of the modal box. I checked the interaction triggers available in Webflow again to see if there was an onblur event or anything similar, but I don't see anything like that. Maybe I'm missing something?


#7

Thank you so much @sabanna for this! It's been incredibly helpful.

I have one glitch I can't figure out. The modal window is open and showing dynamic data. But it only ever shows the data for the last item. No matter which item you click on, the modal shows the data for the last item.

Here's my read-only link: https://preview.webflow.com/preview/aim-adoptions-wip?preview=49950ea8b9792d3eff23c840cfcafb5b

This is on the About page underneath the Meet our Staff section (click the photo to unhide the section). Here's a direct link to that page: http://aim-adoptions-wip.webflow.io/about-aim

Surely I'm missing something simple. Thank you so much! :slightly_smiling:


#8

Hi, @MindMeldCreative.

Thanks for the kind words. I am glad that my experience helps.

Just one little detail that been lost in your project, check the option "Limit to sibling element" in the interaction, which is opening the modal. :slightly_smiling: It will fix everything.

Best,
Anna


#9

Hi @sabanna

Thank you for this awesome tutorial.
Have you ever tried this custom lightbox with collection of videos? the modal window will popup to play a video and when we click "close" the modal window will close and the video stop playing. I greatly appreciate if you have a suggestion for this problem.

Thank you,
Strong


#10

Sorry, but from a technical point of view I must strongly advice against this approach.

Though @sabanna's solution is innovative in circumventing Webflow’s limitations, it’s not technically clean.
Using this approach will result in downloading every resource within the modal window during initial page load (all high res images when they are not needed). This could be okay for 1 or 2 modal windows (like for example on a Subpage), but when used on a large group of 5+ items (like in a gallery) you're in for an enormous load time for your page.

You can test this be opening sabanna 's example, open your debugger console, navigating to the network tab and you will see that both the preview & full resolution images are loaded at once - which is a big No-Go for large collections.

The right thing to do here would be for @webflow to solve this problem on a base level with, for example, a "Modal View Controller" UI (maybe next to the viewport icons) which lets you add & toggle different modal states, natively works with their CMS system and loads modal resources on the fly (aka only when needed).

Considering that modals have become a standard fixture of modern Webdesign, a Modal View Controller (next to multi-lingual support) should be a top priority feature on @webflow's user well being list. :stuck_out_tongue:
( like if you agree )


#11

I found a work around for this. In step 1.6 instead of instead of image-big you can add in a slider. For each slide add in one image with the same styling as step 1.7.

This worked for me because I only had 6 images for each collection. However, this process would become tedious with a dozen or more images.

The only other issue I ran into is that no matter which image the user click on to enlarge, the slider will always start with slide 1, and therefore also with image 1.

Happy Webflowing!
Brandon


#12

Hi Sabanna

Great tutorial and really easy to follow!. Thanks for sharing and taking the time to put it together.

For your thumbnails it seems as though the image needs to be square in order for it to display correctly. Otherwise it stretches to fill. What would the settings be if you want to fit it proportionally in a square rather than stretching.


#13

Hi, @AMDD

Check the read-only link, I changed thumbnail images settings. To be honest, I wasn't paying much attention to this particular moment. If you do not care much that thumbnail images will be "cutted" you can use same settings as I did. Or you can assign to lightbox link the option use BG image connected to dynamic collection

Cheers,
Anna


#14

Thanks Anna! That works great.


#16

https://www.mvmtwatches.com/collections/all-mens-watches/products/chrono-black-leather#

hi! I created a lightbox with dynamic content (which I successfully did it by following Sabanna's tutorial, thank you, Sabanna!), and I'm trying to give it a function that by opening the lightbox, within it, you can swipe to the next image. like this~ (examples from MVMT watches)

Can anyone guide me through this? I'm all ears!

Thanks in advance!

Kind Regards,
Klio.


#17

Hi, @Klio_Peng!

I am happy that my tricks were useful.

Unfortunately, by using this method there is no way to switch between items while lightbox is open :confused: I am sorry

Cheers,
Anna


#19

@sabanna Thanks for putting this together! It works great for me except that when I click on my Lightbox thumbnail the page jumps to the top each time. I suspect it's the Modal spreading up across the entire site's height.. However it's the same code that you used. Maybe you can help me spot the issue? (I also tried Lightbox-modal height 100vh FYI)

Here's the dev site: http://aurora-borealis-yukon.webflow.io/tour/aurora-borealis-at-northern-lights-resort-spa

Thanks for your or anyone else's help!


#20

@sabanna, this is awesome, thanks you for the tutorial. Got a question for you.

I want to add dynamic content from a collection to a lightbox, but I don't want multiple collection items in the lightbox. Instead, I want each collection item on a page to open its detail content in a lightbox (as opposed to having each collection item open its content on a unique page).

Does this make sense? Is there a way to do this?


#21

Hello, @crisp_thoughts

This tutorial showing exactly same concept that you want to have. If you want to have something more than only image "inside the lightbox" just add that elements into the lightbox-modal

Cheers,
Anna


#22

A post was split to a new topic: Custom flex lightbox with CMS