Lightbox Mousein/Mouseout problem

Ask the community
,
1

Hello! I am trying to set up a lightbox with mousein/mouseout. I read many examples we have in this site but seems they are not working.

This is the site (fake site to test it):
https://midviajeslaspareja.wixsite.com/misitio

I plan to make the lightbox open when you step over the big rectangle with the cursor

The ligthbox its already made and its set to appear manually

I have the following code in the Page section.

import wixWindow from ‘wix-window’;
export function vectorImage1_mouseIn(event) {
wixWindow.openLightbox(“Popup”)

710×220 8.23 KB

Note that vectorImage1 = is the rectangle
Popup = is the lightbox
I set up the export function from the right panel

Also, I am using “wixWindow” instead “window” alone because I followed this guide

The only thing that is strange its the red circle on the left that says “Parsing error: import and export may only appear at the top level”

Could you tell me why is not working?
Any help would be really appreciate

Thank you
Diego

2

Hello Diego!

Your problem is a common one that is simple to fix. All you have to do is take line 8 in your code and move it to line 1.

The reason for this is that, in Wix, all imports should appear at the top of the document so the page knows which API to load. importing after $w.onReady will always cause an error.

Best,
Majd

3

Hello Majd,

Thank you for your help! That was the problem. I also was missing one “)” at the final. I leave the code so someone in the future can use it as a reference.

This is the code in Page:

import wixWindow from 'wix-window'
export function vectorImage1_mouseIn(event) {
wixWindow.openLightbox("ventana1")
}

$w.onReady(function () {
 //TODO: 

 // ...
})

“vectorImage1” is the name of the big rectangle that activates the lightbox when you put the cursor over
“ventana1” is the name of the lightbox window

Also, you can only set up only one lightbox per page.

Thank you!
Diego.-