Mouse hover triggers lightbox

Ask the community
,
1

Hello, I’m a graphic designer that recently (2 months ago) started building websites. I have been using wix but never touched the developer tools. But now I want to make the website a little bit more creative and lively. I looked on the web to know how I can create a button when you hover on it triggers a lightbox (which contains the menu). I found this code but frankly I really don’t know how to use it or if it even works.

import window from ‘wix-window’ ;

export function button8_onMouseIn ( event ) { console . log ( “Mouse over button” )

window . openLightbox ( ‘Lightbox1’ );

}

I have put the code on the page and also the master page, I added the event in properties and made sure the names matched but it still doesn’t work. I will appreciate any help. Thanks in advance!

2

When you say →
But now I want to make the website a little bit more creative and lively.

You surely wanted to say…—> more creative and dynamic :wink: (to avoid boring looking static sites, without any integrated feature and function).

Well, how to work in the CODING-WORLD of wix?

  1. Open → DEV-MODE inside your Wix-Editor.
  2. On the very bottom of your editor, you will find the CODE-SECTION (where you can put any code you want for the current choosen page you work at/on)
  3. Put your shown code into this section
  4. Click on Preview (upper-right screencorner) or on publish.
  5. In PREVIEW-MODE you can test your coded page, if everything works well, or not.
  6. You can also do the same on your PUBLISHED-SITE.
  7. Use → the CONSOLE and console-logs to inspect your own code and its functionality.

Thats it. :nerd_face:

3

Definitely more creative and dynamic, that is exactly what I meant. Shows how my knowledge is poor in this. Thanks for the tips. I am going to try but if the code doesn’t work, I don’t know how to fix it. I’ll be back later after trying it.

4

I’m trying to trigger this lightbox when the mouse hovers on the Donate button. When I try the code above, this is the error I get:

Loading the code for the Donate page. To debug this code, open dwz8l.js in Developer Tools.

Seems like you have components outside of editor flow project. Please, move the component “14e5b36b-e545-88a0-1475-2487df7e9206” to “undefined” project. Making a fallback to the first controller…

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

Loading the code for the Home page. To debug this code, open c1dmp.js in Developer Tools.

Could not get staticMediaUrls TypeError: Cannot read properties of undefined (reading ‘media’)

Could not get staticMediaUrls TypeError: Cannot read properties of undefined (reading ‘media’)

Could not get staticMediaUrls TypeError: Cannot read properties of undefined (reading ‘media’)

Could not get staticMediaUrls TypeError: Cannot read properties of undefined (reading ‘media’)

2867×1976 786 KB

5

I would suggest you first to learn a little bit about LIGHBOXES, because the handle and coding of lightboxes is surely not beginner-friendly…

6

@russian-dima okay, I am going to learn how to, but for now, I need some help to fix it so I can finish the project

7

Hi there :wave:t2: I do something similar on my site with a custom menu. I think you should absolutely not use a lightbox in the way you are using it, lightboxes are not only difficult for beginners to code (as Mr Ninja pointed out), but they are also notoriously slow to open.
I recommend using a container box instead, setting it to display on all pages. You can check out this post for the proper code. It might be time-consuming to “rebuild” your menu in this way, but in the long-run I think it will be a better experience for your users.