Is it possible to close a lightbox with a fadeOut effect?
I tried this but it does not work:
setTimeout(() => {
wixWindow.lightbox.close().FadeOut();
}, 2500);
Thanks for any reply
Hi,
No, there’s no ability to animate the closing of a lightbox.
Thank you for your answer,
we hope it will be a future implementation to make the site more enjoyable.
@reddany I might have a solution for you! On my site, I wanted to achieve a similar effect. You can use the code:
$w(‘#lightbox1’).hide(“slide”, rollOptions2);
where “slide” is your desired effect and “rollOptions2” are the desired parameters for the effect. For mine, I have (separate from my button click event trigger) the following to have the light box slide from right to left out of the screen.
let rollOptions2 = {
“duration”: 1600,
“delay”: 300,
“direction”: “right”
you can learn more about the various effects and their options here: EffectOptions - Velo API Reference - Wix.com
This will hide the “Lightbox” element, but it will not close it. On my site, the overlay for the Lightbox is clear, so if the user clicks anywhere after the Lightbox fades, the Lightbox will close and they can use the site. You could use the following if you wanted to have the Lightbox close after your desired effect.
wixWindow.lightbox.close();
you would probably want to do this with a setTimer function in order to have the box close immediately after the Lightbox animation effect.
no guarantee the last part should work, but I think it will!
good luck!
- Anney
@reddany Just tested the last piece on my site and wanted to offer further guidance. First, the method does work! It just takes some tweaking.
The code should look like this when it is all said and done:
let rollOptions2 = {
“duration”: 1600,
“delay”: 300,
“direction”: “right”
};
import wixWindow from ‘wix-window’;
export function button101_click(event) {
//Add your code for this event here:
$w(‘#lightbox1’).hide(“slide”, rollOptions2);
setTimeout(() => {
wixWindow.lightbox.close(“#lightbox1”);
}, 2000);
}
I choose my timeout to be 2000 because the total effect time is 1600 + 300 (delay). This provides a smooth transition. The Lightbox completely closes and the user doesn’t need to click to close it. You can copy paste my code, just be sure to replace the ids for your own buttons, Lightbox, and effects.
happy coding!
-Anney
@ohad-laufer I found a workaround if you are interested. I put it below 
@reddany One last thing. This only works if there is no overlay. Make the overlay of the Lightbox clear. If you want a color background that fades, you can either add a box or shape element and have that fade the same way as your Lightbox, or stretch your Lightbox to be the whole screen. Either will work fine, but there is no way to fade the overlay of the Lightbox.
@anneynorton7 it says ‘Invalid Selector’ in my case. The ID for the lightbox is ‘lightbox1’ and that’s what I am using to select it. The code is on the page code for lightbox.
I have two such lightboxes, it doesn’t work in either.
@anneynorton7 Thank you for your suggestions, I’ll rehearse and update you as soon as I can
Thank you
@anneynorton7 WORKED FOR ME - Thanks!