Hey,
I am trying to link a button in a header to open a lightbox on hover to act as a customised drop down menu. I have created the button and “onMouseIn” function in the properties panel and entered the code:
import window from ‘wix-window’;
export function whatwedo_onMouseIn() {
window.openLightbox(‘lightbox1’);
}
I am so new to code so this I’m struggling to understand the most simplest things. If someone could help, that would be greatly appreciated!
Hi Luca!
First thing is that you got a mistake on the first row.
It should be this:
import wixWindow from 'wix-window';
And did you add an event named “whatwedo_mouseIn” to the button’s properties?
Without inspecting your site those the two reasons I can think of to solve your issue.
If for some reason you don’t manage to make it work, post a link of the page you’re having troubles with and I’d be glad to check it out.
Hope it helps.
Best of luck!
Doron. 
Hi Doron,
Thanks for your reply, but unfortunately it still does not work. I have pasted the code into the “Site” area as it is to do with the header and still no luck. I have opened the properties panel for the button (which is now called button20) and entered “button20_mouseIn”
This is the code I have used:
import wixWindow from ‘wix-window’;
export function button20_onMouseIn() {
window.openLightbox(‘lightbox1’);
}
It is saying that “window” is undefined. I have posted a link to my website below:
https://lucapope.wixsite.com/mysite
I am trying to trigger the button in the menu on the homepage saying “WHAT WE DO” to bring the drop down menu that is shown when you click “WHAT WE DO” but I want to code it so that on mouse hover it does this.
I look forward to your reply,
Luca
Hi again Luca!
Again, you have an error in your code.
It should be:
wixWindow.openLightbox("lightbox1");
Also, I’ve noticed that you’ve put the button20 function both in the site code and the home page code.
I think you should try and comment out the one in the page’s code.
Doron.
Hi Doron,
Code is now as follows:
import wixWindow from ‘wix-window’;
export function button20_mouseIn(event, $w) {
wixWindow.openLightbox("lightbox1");
}
STILL no luck, I have also removed the code from the page code so it is only in the site code. Please advise!
Many thanks in advance,
Luca
Hi Luca!
Just checked out your site.
The previous state is what I saw, hence no changes in the code as you just posted.
After trying it myself (commenting out the page code and change the code to its correct form), I can assure you it does work.
Please make sure you change the code according to what I suggested and save it properly.
Doron.
Hi Doron,
Please could you post exactly the code you have used to make it work as I am still not having any luck?
Thank you for all your help.
Kind regards,
Luca
Hi Luca!
Your code should look like this:
import wixWindow from 'wix-window';
export function button20_mouseIn(event, $w) {
wixWindow.openLightbox("Menu");
}
Note that what the function is doing is opening a Lightbox according to its name and not by its field name.
This means that instead of “lightbox1” you should write the name of the Lightbox you want to open.
Another thing is that I noticed that you both added an event to the button and connected it by link.
If you wish the function to work you need to disable the link option.
Doron.
Hi Doron,
Amazing, thank you so much it finally works! Is there any way to make it instant and avoid the (very slight) delay when hovering?
Secondly, how can i make it so when i move the cursor off the lightbox it closes?
Many thanks,
Luca
Just as you used the ‘onMouseIn’ method to open the Lightbox you can use the ’ onMouseOut ’ to close it.
Note that the function close( ) should be written in the Lightbox’s code page and not in the site page.
As for the delay,
I believe that your intention ***** was to create an expandable menu for this certain tab.
If so, although using a Lightbox is a very creative work-around and I am impressed, I would suggest using the same method of mouseIn/mouseOut on a box object that you show( ) / hide( ) accordingly.
The delay is due to the fact that even if openLightbox is not a page redirection (such as wixLocation.to( ) ),
it does need to open a new window and the loading time seems like a delay.
Using the other method I described should solve this issue.
***** If your intention was different than what I assumed I’d really love to hear what you had in mind.
Hope it helps.
Best of luck!
Doron. 
Hi,
I am trying to implement the something. But, the problem that i am facing is that if I use a box to show/hide then how will it appear on every page? A light box can appear on every page of the website. But, the box will only appear at the home page. So, is there any solution to this? If not then please let me know if there is any solution to the delay in light box.
Thank you
@sahiljain332 can you give a specific example of what you are needing? Is the lightbox initiated by an action or is is designed to load on page readiness?
If you can provide any examples of code or a link to the example you are working with, better insight can be provided.