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

Updated: Sep 14, 2020


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


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

335 views0 comments

Recent Posts

See All

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.