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

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

    $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

Services world wide

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