Any time I try and use a lightbox, the only thing that displays is the X button used to close the lightbox and it takes up the entire screen! Even if the light box is supposed to be a little window off to the side, the lightbox takes up the entire window and it’s filled with giant X! This happens no matter what lightbox I use. It even happens when I use a lightbox straight out of the box with no modifications.
1 Like
Hi Eddie, I experienced similar things and then I found out that using some corvid codes, you can easily make your own lightbox.
First of all, turn your Dev Mode on.
Just add a container box, make it fixed using the “scroll effect” and also make it “hidden on load”. Design the box the way you wanna do. You can also make it “don’t display” to work conveniently on the editor, but do not forget to “display” it back before you preview or publish your site.
Add a button or make a button for your self, make it “fixed” again and using the “code properties”, activate its “onClick” functionality: When you do this, two lines will be added to your page code below, starting with “export function…”.
Add another button or make another button for your self, make it “fixed” again, place it on the same position with your first button, but now make it “hidden on load” and activate its “onClick” functionality using the “code properties”. Two more lines will be added to your page code below.
The first button will open your lightbox, whereas the second button will be invisible on load but will be shown once you click the first button and will close your lightbox.
Here, you should take note the ID’s of your “container box” and your “first and second buttons”, which you can find in the “code properties” box.
As for the corvid codes:
export function yourFirstButton _click(event) {
$w( '# yourContainerBox ’ ).show( ‘slide’ , { ‘duration’ : 800 , ‘delay’ : 0 , ‘direction’ : “left” })
$w( '# yourFirstButton ’ ).hide( ‘fade’ , { “duration” : 800 , “delay” : 0 })
$w( '# yourSecondButton ’ ).show( ‘fade’ , { “duration” : 800 , “delay” : 0 })
}
export function yourSecondButton _click(event) {
$w( '# yourContainerBox ’ ).hide( ‘slide’ , { ‘duration’ : 800 , ‘delay’ : 0 , ‘direction’ : “left” })
$w( '# yourFirstButton ’ ).show( ‘fade’ , { “duration” : 800 , “delay” : 0 })
$w( '# yourSecondButton ’ ).hide( ‘fade’ , { “duration” : 800 , “delay” : 0 })
}
Just put the ID’s of your first and second buttons and of your container box in place of the terms yourFirstButton , yourSecondButton , and yourContainerBox . Everything here is case-sensitive. You can also play with the effects above the way you want to do or use other effects which you may find on corvid pages. Last thing, if your container box covers your buttons, make sure that your buttons are arranged above the container box “layerwise”, using the “arrange”, “move up” or “move down” options, otherwise you may not use your buttons.
1 Like