How to create a custom Lightbox using Interactions

Hi all,

I was wondering if anyone knows how to have a txt link pop up a light box… but when the lightbox image pops up, it doesnt show as a black screen around it… just a image that pops up…?

So like this… http://matt-test-march2015.webflow.com/lightboxtest

And heres the read only link: https://preview.webflow.com/preview/matt-test-march2015?preview=7e4140c4b226c0f7dc89b9a617fb0253

But on click of the txt, not the image and no black screen around the image on pop up…

Anyone know how to do this?

Thanks

Hey, maybe this will guide you through this:

You have to place your image into a certain environment, that includes a background …

There is also a lightbox tutorial (which handles a image gallery but …)

Regards
Daniel

1 Like

Thanks … im having a little trouble with the modal thing… here is what I have so far

http://matt-test-march2015.webflow.com/modal

And here is the preview link:
https://preview.webflow.com/preview/matt-test-march2015?preview=7e4140c4b226c0f7dc89b9a617fb0253

Im trying to have the link txt “read more” open up the modal window… its not really working too well

Thanks

I do have a problem with the content shown in your “preview link”. Because there is only another list item shown whenever I try to click the link.

Are you looking at this link Modal ??

I am working off that page

Sorry my mistake… here is the revised… (I guess you cant see it on a diff page)

https://preview.webflow.com/preview/matt-test-march2015?preview=7e4140c4b226c0f7dc89b9a617fb0253

Apply a background-color to your “modal-background” element.
Set its alpha transparcy to like 60%.
Its properties should look like this:

  1. Set its display mode to :hidden

  2. Go to the “Assets → Interactions” and create two new interactions.

3.1 First one named “show modal”
(be sure to have no element selected in the editor - else it will be applied to this selected element)
Should look like this:

3.2 Second one name “hide modal”

Now:
Go to your navigator and select the link “Read more” and apply the interaction “show modal” to that.

Then select the “modal background” and apply the interaction “hide modal”.

If you then preview the site, your modal should work fine. And if you click on the open modal / its black background it should disappear.

Regards

1 Like

Thanks daniel… i think im almost there… im just having difficulty closing the box and also having the image be big? right now its showing so small… the acutal size of the image is 720 pixels by 400

https://preview.webflow.com/preview/matt-test-march2015?preview=7e4140c4b226c0f7dc89b9a617fb0253

Hi @mattmcs, this demo may be helpful:

Demo: https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Custom Lightbox

1 Like

im just having difficulty closing the box

Yeah thats because there went something wrong :). But no problem
Your interaction looks like this atm:

That doesnt do anything because you ve set the “display:none” as “INITIAL APPREANCE”.
Well…if its not visible…it is not there, is it?

So in order to solve this you have to set this property one step below under “Triggers”.

See:

Within that it looks like this:

Hope that will help.

1 Like

Thats because your image has no actual dimensions … yeah it is correct that the actual image has 720 by 400 pixels, but take a look at the properties. it is set to: “Auto”.

That means that it relies on its actual container. And when you look at your “modal window” you will see that its size is actually: width: 70px. Therefore your image within that element will be given this value as width.

You can do two things:

  1. remove the 70px width from this element
  2. define a larger value for that…e.g. 700px.

Cheers
Daniel

1 Like

And one more thing. Since we “close” the modal with another interaction by clicking on the “modal background” please remove the “second click” interaction from “SHOW MODAL”.

It should then look like this:

Also dont trigger the “SHOW MODAL” interaction by setting it on the “row” but just on the hyperlink itself.

  1. Click on “row”
  2. The remove the interaction from there
    2.1 go to “Assets” → Select “none”
  3. Go to the “Navigator” and click “Link”
  4. Back to “Assets” → Select “Show Modal”.

Then everything should be fine.

Cheers
Daniel

1 Like

Thanks guys, looks like it worked!

2 Likes

@Daniel_Schultheiss
How do you change the background color of the lightbox. Also how can I export the HTML code, edit it and import it back into my page?

@Brian_Lackore
Just apply a color to the class “modal window”. Then you have set a bg color of the lightbox itself.

You can export code, with the export feature of webflow but not import it back. That is not possible. (I think).