Tutorial Video
Learn how to create hover effect using a hidden box vs a Wix Lightbox. This video will demonstrate how we call a window on Wix to open up a lightbox. You will see the difference in speed and reaction time between the code and the hidden box vs the code and the Wix lightbox. In the tutorial video, you will see us use examples of code that are triggered by the Properties Panel. We have added other sample code below that shows how to trigger by using the onReady section instead.
Follow Along #1
Tutorial Page
Good to Know #1
Coding using the Properties Panel
The Code to open a Lightbox on Click event
import wixWindow from 'wix-window';
$w.onReady( () => {
//on ready code
} );
export function buttonName_click(event) {
wixWindow.openLightbox("LightboxName")
.then( () => {
//add other code here if needed
} );
}
The Code to open a Lightbox on Hover event
import wixWindow from 'wix-window';
$w.onReady( () => {
//on ready code
} );
export function elementName_mouseIn(event) {
wixWindow.openLightbox("LightboxName")
.then( () => {
//add other code here if needed
} );
}
The Code to open Show and Hide an element on Click
import wixWindow from 'wix-window';
$w.onReady( () => {
//on ready code
} );
export function elementName_click(event) {
$w('#boxName').show();
}
export function elementName_click(event) {
$w('#boxName').hide();
}
The Code to open Show and Hide an element on Hover
import wixWindow from 'wix-window';
$w.onReady( () => {
//on ready code
} );
export function elementName_mouseIn(event) {
$w('#boxName').show();
}
export function elementName_mouseIn(event) {
$w('#boxName').hide();
}
Good to Know #2
Coding using onReady instead of the Property Panel
Element Compatiblity
Make sure to check the Corvid API reference list to verify that the element you are trying to use actually has the capability to add code directly to it to trigger an event instead of triggering the event using the Properties Panel. Some elements are not compatible and cannot be coded that way. https://www.wix.com/corvid/reference/
The Code to open a Lightbox on Click event
import wixWindow from 'wix-window';
$w.onReady(() => {
$w("#buttonName").onClick((event) => {
wixWindow.openLightbox("LightboxName")
.then(() => {
//add other code here if needed
});
});
});
The Code to open a Lightbox on Hover event
import wixWindow from 'wix-window';
$w.onReady(() => {
$w("#myElement").onMouseIn((event) => {
wixWindow.openLightbox("LightboxName")
.then(() => {
//add other code here if needed
});
});
});
The Code to open Show and Hide an element on Click
import wixWindow from 'wix-window';
$w.onReady(() => {
$w("#elementName").onClick((event) => {
$w('#boxName').show();
});
$w("#nameOfElement").onClick((event) => {
$w('#boxName').hide();
});
});
The Code to open Show and Hide an element on Hover
import wixWindow from 'wix-window';
$w.onReady(() => {
$w("#itemName").onMouseIn((event) => {
$w('#boxName').show();
});
$w("#elementName").onMouseIn((event) => {
$w('#boxName').hide();
});
});
Author
by Code Queen
Stuck on a project? Hire Code Queen, LLC!
Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.
Online Booking: Discovery Session
Contact Form: Send project details
An interesting application. I want to create something creative for Valentine's Day, for this I found an interesting resource with valentine photoshoot ideas for couples Various concepts and trends in the world of design are collected and organized here, making it an important resource for inspiration and development of creative ideas