Open a Lightbox or Show and Hide a hidden element using Corvid

Updated: Feb 9


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

https://codequeen.wixsite.com/wixrgv-home


 

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();