Trigger Lightbox on MouseIn

Ask the community
,
1

I can’t seem to trigger a lightbox on button mouseIn. Is there a way to make this happen?

2

Hi Citisonship,

To show a lightbox on mousein you should write something like the following, assuming the button is called button1 and the lightbox called My Lightbox -

import window from 'wix-window';

export function button1_onMouseIn(event) {
  window.openLightbox('My Lightbox');
}

  • You can read about the openLightbox API in our reference.

  • You will need to add the button onMouseIn event from the property panel, and the function skeleton above will be generated.

  • The lightbox name is the same name you see on the site structure tree to the left.

3

Hello Yoav,

Thank you so much for this! I have been trying this for days, lol:) Can you tell me what I am doing wrong?

1436×779 74.4 KB

4

I am trying to open the menu lightbox when hovering over the hamburger icon in the header…

5

Hay citisonship,

In your code you wrote

$w("#menuButton").openLightbox('menuLightbox');

You should have written

window.openLightbox('Menu');

I have fixed two things here

  1. The function openLightbox is of the window object, from wix-window

  2. The name of the lightbox to open is the same as the name in the left site structure tree.

6

Thank you Yoav, you are awesome!! Greatly appreciate that:)

7

Thank you!!! I just successfully used this!!

8

Hi all. You make this sound very simply, yet for some reason I am struggling!

I too am trying to get a lightbox to appear when the cursor goes over a specific element. I have named the element Button1 and the lightbox “Subscribe”.

I have tried copying the code above, but still get errors.

I have used:

import window from ‘wix-window’;
export function button1_onMouseIn(event) {
window.openLightbox(‘Subscribe’);
}

Any advice? Many thanks!

9

Hi,

Did you remember to set the onMouseIn using the properties panel?
See here .
If you’ve done that, can you share the error you’re getting?

Liran.

10

I believe so… Image attached (changed button name to “button10”.

Error message says "Parameter ‘event’ is never used.

375×588 20 KB

11

It’s just a warning, not an error :)… you can delete the parameter ‘event’ if it bothers you.

On the lightbox trigger setting, do you have anything configured?

12

I see.

When in preview mode it says this:

Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.

Loading the code for the Landing page - investment advice page. To debug this code, open whpyz.js in Developer Tools.

Not sure if this makes a difference, but I have another lightbox that appears on the first page you open, across all pages (standard lightbox situation).

I don’t believe I have anything configured on the lightbox trigger setting.

289×585 11.8 KB

13

Hi,

Are you typing the code on the ‘Site code’ tab? if so, make sure to move it to the ‘Page code’ tab.
Note that site code is only relevant for header/footer elements, and that is runs on all pages.

If it is still not working, add console.log(“Mouse over button”) to the mouseIn event to make sure the event is fired.

14

Okay, will try that:

So the code should look:

import window from ‘wix-window’;
export function button10_onMouseIn(event) {console.log(“Mouse over button”)
window.openLightbox(‘Subscribe’);
}

15

Hi, added the above, but it still doesn’t seem to be working…

16

Hi,
I am trying to close the light box when I move away from the button , currently I have
On the site tab I have the following codes :

$w.onReady(function () {
//TODO: write your page related code here…

});

import window from ‘wix-window’;

export function button2_onmouseIn(event) {
window.openLightbox(‘brands’);
}

export function button3_onmouseIn(event) {
window.openLightbox(‘perfumes’);
}

and on the page tab I have the following codes :

});

import window from ‘wix-windows’;

export function button3_onmouseIn(event) {
window.openLightbox(‘perfumes’);
}

export function lightbox2_onmouseOut(event) {
window.lightbox.close();

}

17

Just noticed in your properties panel is says “button10_mouseIn” and in your code it says “button10_onMouseIn” - they must match for it to work.

18

I’ve been trying this code on mysite and its not working for some reason. I don’t have the lightbox set to appear on any page. My code is on the master javascript page and the homepage.

import window from ‘wix-window’ ;

export function  solutionsbutton_mouseIn ( event ) { 
window . openLightbox  ( 'solutionsmenu' );

}

Anyone have any ideas? Thanks so much!