Close Lightbox when mouse enters overlay area

Ask the community
,
1

Hi,

I’m looking for some help, trying to close a lightbox whenever mouse is moved anywhere outside the lightbox limits; such as back up into the header menu or out to the overlay background area.

I’ve tried everything and can’t get this to work.

Any pointers gratefully received.

2

Hi John,

You could put a box in the background of the lightbox active area and add a mouseOut event that would have the wixWindow.lightbox.close() command in it.

3

Or just:

import wixWindow from 'wix-window';
$w.onReady(() => {
$w('#lightbox1').onMouseOut(event => {
    wixWindow.lightbox.close();
})
})

(I mean why to add a box?)

4

Hi J.D.,

Come up with a parsing error when using this code.

5

line 2:

$w.onReady(() => {
6

Damn… should have seen that myself!

On the plus side … works like a dream :blush:

7

Just would like to note, Anthony’s solution also works, but I found it made an already laggy lightbox even slower.

I wish Wix could make the lightbox feature load in/out a little faster.

Any other solutions… I’m currently using the lightbox as a drop menu?

8

J.D., I tried that before posting my response, and it didn’t do what John hoped it would do: close the lightbox when the mouse was moved out of the active area.

It was added from the property sheet though, and not in the onReady. Any idea why that would matter?

9

John, the lightbox performance is a known weakness, I hope it’ll be improved some time soon (on my sites I try to avoid using lightbox when it’s possible, and to use other options instead, but of course, for site menu, I use a lightbox despite the performance issue).

Anthony, it should work the same from the property panel (I actually tested it and it worked for me). No idea why it didn’t work when you tried it.

10

Hi J.D.

Thanks for the reply.

Was thinking maybe an option to use a hidden on load box / hover box with mouse in/out functions that may load quicker.

The biggest problem was using a repeater within the lightbox to manage the sub-menu data. This created a huge time lag pulling through the data, even for a relatively small sub-menu!

Back to manual buttons on the sub-menu as won’t be changing it much anyway, and “slight” improvement on the responsiveness.

All in all worked out well and I’m more than happy with the solution.

11

J.D., it’s making sense now. It turns out that I wasn’t careful to select the lightbox when creating the mouseOut event from the property sheet. It created the event at the page level.