Streaming live at 10am (PST)

Triggering a lightbox with a button


#1

Hi there. I've seen one post on this in the forums but I don't believe it really addressed what I'm hoping to accomplish. If I overlooked the solution, please accept my apologies!

Is it possible to have a Webflow button trigger a lightbox? Essentially, I'd like to use the button object available from within Webflow as the "cover image" of the lightbox. So that it can sit next to other buttons, look exactly the same, but instead of linking to another page or to an external website, it would just open up my lightbox.

Please let me know - thank you!


Button that triggers a lightbox using scripts
#2

@danberkdanberk, You can make the lightbox thumb have an opacity value of zero (alpha not hidden) and nest it inside any element. I build custom thumbs that way all the time. Should work fine for a button.


#3

Hey @vlogic, thanks for the reply. I'm having a little difficulty understanding. I've dragged a lightbox component onto the stage and have its opacity at 0. I've also dragged a button down. How can I make the button trigger the transparent lightbox? I don't really see a way to 'nest' the lightbox inside the button (Webflow seems to be pretty stubborn about nesting links inside links).

Sorry if I'm not seeing the solution clearly. Let me know if you can elaborate. Thank you!


#4

Anybody have any insight on this? Either a button or even text to launch a Webflow lightbox?


#5

Really strange @danberkdanberk, I just tried this with a clean build and it seems that lightbox has changed possibly? In one of my first marathon weekends with Webflow I built a lightbox gallery with invisible thumbs and was able to nest the lightbox:

https://webflow.com/design/lightbox-thumbs
public:
https://webflow.com/design/lightbox-thumbs?preview=9e2a11b480910063c42a42a0e097ec25

I am having some difficulty nesting the lightbox with a new build. I may be doing something stupid though. Will compare the two and get back to you shortly. Meanwhile, look at the example above in the Navigator to see how it is built.


#6

Wonder if maybe a Webflow developer might have any insight? Perhaps there's some kind of workaround, because yeah it seems impossible to nest any linking element in another linking element. Really all I need is to utilize the graphical element of the button to launch the lightbox...

Let me know if you discover anything - thank you @vlogic!


Pop Up YouTube Video
#7

I wasn't able to get the title to nest inside, but am pressed for time and didn't have opportunity to play with it much. I had to set the title as relative or absolute and relocate it to center. Otherwise it works perfectly and takes on the appearance and style of any other button or div. In my previous lightbox thumbs example I was able to simply drop a textbox inside, so I may be overlooking the obvious.

http://lightbox-button.webflow.com/
https://webflow.com/design/lightbox-button?preview=5c4cde498fd7e75134a9dda92868c283

Best of luck to you Dan and welcome to webflow! If you come up with a better solution please share it.


#8

@vlogic I used the method you just presented and it actually looks and behaves great. It's definitely a slight hack with the text centered in the button but it is a perfect fix for my needs!

Thank you so much for taking the time, I really appreciate it! If anybody needs details on the solution don't hesitate to ask or message me.

Best,
Db


#9

You can also create your lightbox somewhere and create a button as well. Add a unique name for the lightbox image and for the button. Then add the following script to the Custom Code Footer section:

$(document).ready(function() {
  $('#lightbox-unique-id').click(function(e) {
    e.preventDefault();
    $('#button-unique-id').trigger('tap');
  });
});

#10

Hi. Is this script tested? I actually tried to use it and it doesn't work for me.

edit.

ok I know everything, script is correct, but the #id's were reversed.

Correct script is:

$(document).ready(function() {
$('#button-unique-id').click(function(e) {
e.preventDefault();
$('#lightbox-uniqe-id').trigger('tap');
});
});

Thanks!


#11