Problem with code.

Ask the community
,
1

Hi guys! I’m trying to fade out a lightbox when clicking a button. I wrote the following code but it just closes the lightbox, without the fade out animation:

import wixWindow from 'wix-window';

export function button1_click(event) {
    wixWindow.lightbox.close("fade");
}

What am I doing wrong? Thanks in advance.

2

Check out the documentation:
https://www.wix.com/corvid/reference/wix-window.lightbox.html#close

You can’t set the closing animation that way, it must be done with the GUI.

3

Hi! First of, thank you for your reply. I’ve been trying to do it with the GUI, but I can’t seem to get it working. Could you please provide me the code to do it? Thanks.

4

@b4443569 A lightbox consists 2 elements:

  1. lightbox
  2. overlay
    You can animate the closing of the lightbox element. But there’s currently no way to animate the closing of the overlay.
 import wixWindow from 'wix-window';
let fadeOptions = {
 "duration":   2000,
 "delay":      1000
};
export function closeButton_click(event) {
    $w("#lighbox1").hide("fade", fadeOptions)
 .then(() => { wixWindow.lightbox.close();})
 }
5

@jonatandor35 Hi J.D! Thank you for your answer, it works! Now, because it’s impossible to animate the overlay, I’ve put the content inside the lightbox, but the problem is that it isn’t as responsive as the overlay. Could you help me out with this?

6

@b4443569 please add more details, screenshots etc…

7

@jonatandor35
My lightbox is a full-size video, which worked well when putting it in the overlay, and was completely responsive to all screen sizes:

1920×1080 109 KB

But the problem is, since I can’t animate the overlay, I had to put the video in the lightbox, which doesn’t work that well:

1920×1080 113 KB

How can I resolve this? And again, thank you for answering.

8

@b4443569 I don’t know. I can’t think of a simple solution off the top of my head. Try to see if there’s something in the video settings that may help/