Wix Lightbox click trigger will not activate after the first homepage load. Only activates after I go to another webpage and then come back.

Ask the community
,
1

I have been working on this for 4 days. I don’t know why the lightbox trigger won’t activate after the first time the homepage loads. It will only activate after I go to the second webpage and then come back to the homepage. I have gone through several forums discussing this same problem, even one that uses similar code, and I still have not found a solution. Please help me.

Page Code:
import wixWindow from ‘wix-window’ ;
$w ( “#videoBox2” ). hide ();

$w . onReady ( function () {

**if** ( wixWindow . formFactor  ===  "Mobile" ){  
    $w ( "#videoBox2" ). show ();  
    $w ( "#videoBox2" ). show ();  
}

})

export function instructorBioPicViewBio_click ( event , $item ) {
let instructorName = $item ( ‘#instructorName’ ). text ;

console . log ( 'instructorName' ); 

wixWindow . openLightbox ( 'BiosMain' ,  instructorName );

}

Lightbox Code:
import wixData from ‘wix-data’ ;

import wixWindow from ‘wix-window’ ;

$w . onReady (() => {
// 2: Retrieve the ID from the lightbox context.
let popup = wixWindow . lightbox . getContext ();

$w ( "#biosPopupDataset" ). onReady (() => { 
    // 3: Filter the dataset with the ID: 
    $w ( '#biosPopupDataset' ). setFilter ( wixData . filter (). eq ( 'title' ,  popup )). then (() => { 
        
        **let**  currentItem  =  $w ( '#biosPopupDataset' ). getCurrentItem (); 

            $w ( '#image3' ). src  =  currentItem . profilePicture ; 

            $w ( '#instructorTitle' ). text  =  currentItem . position ; 

            $w ( '#instructorEmail' ). text  =  currentItem . email ; 

            $w ( '#instructorBio' ). text  =  currentItem . biography ; 

            $w ( '#instructorFullName' ). text  =  currentItem . title ; 
                
    }) 
})

})

export function lightboxCloseButton_click ( event ) {
wixWindow . lightbox . close ();
}

2

The lightbox trigger is part of a repeater

3

Move the following line into the $w.onReady block:

$w("#videoBox2").hide();
4

Hi J.D.,

I moved the code into $w.onReady, but the same thing is still happening. Now the image won’t show as a clickable item when the mouse hovers over it until I got to a different page and come back.

5

Wait, false alarm. Wix’s cache processing was just slow. I’m gonna double check with another device too.

6

Ok, so the lightboxes on the homepage work now. Thank you so much! I am having a similar issue on my ‘Program’ page. I am note sure what part of the page code is causing a block/stop of functions when I load or reload the page. Can you please take a look? Thank you in advance:

import wixWindow from ‘wix-window’ ;

//onclick open class information lightbox
export function classTitle_click ( event , $item ) {
let classTitle = $item ( ‘#classTitle’ ). text

console . log ( classTitle ) 

//pass database information filtered by title 
wixWindow . openLightbox ( 'ClassInfo' ,  classTitle )

}

//Make Schedules Section expand with content change
//$w(‘#schedulesSection’).collapse();

//on page load, hide all schedule boxes and menu selections EXCEPT Hei’s
$w ( “#box2” ). collapse ();
$w ( “#box3” ). collapse ();
$w ( “#box4” ). collapse ();
$w ( “#box5” ). collapse ();

//$w(‘#scheduleMenuItemSelect1’).show();
$w ( “#scheduleMenuItem1Hei” ). hide ();

$w ( ‘#scheduleMenuItemSelect2’ ). hide ();
$w ( ‘#scheduleMenuItemSelect3’ ). hide ();
$w ( ‘#scheduleMenuItemSelect4’ ). hide ();
$w ( ‘#scheduleMenuItemSelect5’ ). hide ();

//Show Hei’s Schedule
$w ( “#scheduleMenuItem1Hei” ). onClick ( ( event ) => {
$w ( ‘#scheduleMenuItemSelect1’ ). show ();
$w ( “#scheduleMenuItem1Hei” ). hide ();

$w ( "#scheduleMenuItem2Liana" ). show (); 
$w ( "#scheduleMenuItem3Leon" ). show (); 
$w ( "#scheduleMenuItem4Wayne" ). show (); 
$w ( "#scheduleMenuItem5Pam" ). show (); 

$w ( '#scheduleMenuItemSelect2' ). hide (); 
$w ( '#scheduleMenuItemSelect3' ). hide (); 
$w ( '#scheduleMenuItemSelect4' ). hide (); 
$w ( '#scheduleMenuItemSelect5' ). hide (); 

//show box 1 and hide all others 
    $w ( '#box1' ). expand (); 
    $w ( "#box2" ). collapse (); 
    $w ( "#box3" ). collapse (); 
    $w ( "#box4" ). collapse (); 
    $w ( "#box5" ). collapse ();

})

//Show Liana’s Schedule
$w ( “#scheduleMenuItem2Liana” ). onClick ( ( event ) => {
$w ( ‘#scheduleMenuItemSelect2’ ). show ();
$w ( “#scheduleMenuItem2Liana” ). hide ();

$w ( "#scheduleMenuItem1Hei" ). show (); 
$w ( "#scheduleMenuItem3Leon" ). show (); 
$w ( "#scheduleMenuItem4Wayne" ). show (); 
$w ( "#scheduleMenuItem5Pam" ). show (); 

$w ( '#scheduleMenuItemSelect1' ). hide (); 
$w ( '#scheduleMenuItemSelect3' ). hide (); 
$w ( '#scheduleMenuItemSelect4' ). hide (); 
$w ( '#scheduleMenuItemSelect5' ). hide (); 

//show box 2 and hide all others 
    $w ( '#box2' ). expand (); 
    $w ( "#box1" ). collapse (); 
    $w ( "#box3" ). collapse (); 
    $w ( "#box4" ). collapse (); 
    $w ( "#box5" ). collapse ();

})

//Show Leon’s Schedule
$w ( “#scheduleMenuItem3Leon” ). onClick ( ( event ) => {
$w ( ‘#scheduleMenuItemSelect3’ ). show ();
$w ( “#scheduleMenuItem3Leon” ). hide ();

$w ( "#scheduleMenuItem1Hei" ). show (); 
$w ( "#scheduleMenuItem2Liana" ). show (); 
$w ( "#scheduleMenuItem4Wayne" ). show (); 
$w ( "#scheduleMenuItem5Pam" ). show (); 

$w ( '#scheduleMenuItemSelect1' ). hide (); 
$w ( '#scheduleMenuItemSelect2' ). hide (); 
$w ( '#scheduleMenuItemSelect4' ). hide (); 
$w ( '#scheduleMenuItemSelect5' ). hide (); 

//show box 3 and hide all others 
    $w ( '#box3' ). expand (); 
    $w ( "#box1" ). collapse (); 
    $w ( "#box2" ). collapse (); 
    $w ( "#box4" ). collapse (); 
    $w ( "#box5" ). collapse ();

})

//Show Wayne’s Schedule
$w ( “#scheduleMenuItem4Wayne” ). onClick ( ( event ) => {
$w ( ‘#scheduleMenuItemSelect4’ ). show ();
$w ( “#scheduleMenuItem4Wayne” ). hide ();

$w ( "#scheduleMenuItem1Hei" ). show (); 
$w ( "#scheduleMenuItem2Liana" ). show (); 
$w ( "#scheduleMenuItem3Leon" ). show (); 
$w ( "#scheduleMenuItem5Pam" ). show (); 

$w ( '#scheduleMenuItemSelect1' ). hide (); 
$w ( '#scheduleMenuItemSelect2' ). hide (); 
$w ( '#scheduleMenuItemSelect3' ). hide (); 
$w ( '#scheduleMenuItemSelect5' ). hide (); 

//show box 4 and hide all others 
    $w ( '#box4' ). expand (); 
    $w ( "#box1" ). collapse (); 
    $w ( "#box2" ). collapse (); 
    $w ( "#box3" ). collapse (); 
    $w ( "#box5" ). collapse ();

})

//Show Pam’s Schedule
$w ( “#scheduleMenuItem5Pam” ). onClick ( ( event ) => {
$w ( ‘#scheduleMenuItemSelect5’ ). show ();
$w ( “#scheduleMenuItem5Pam” ). hide ();

$w ( "#scheduleMenuItem1Hei" ). show (); 
$w ( "#scheduleMenuItem2Liana" ). show (); 
$w ( "#scheduleMenuItem3Leon" ). show (); 
$w ( "#scheduleMenuItem4Wayne" ). show (); 

$w ( '#scheduleMenuItemSelect1' ). hide (); 
$w ( '#scheduleMenuItemSelect2' ). hide (); 
$w ( '#scheduleMenuItemSelect3' ). hide (); 
$w ( '#scheduleMenuItemSelect4' ). hide (); 

//show box 5 and hide all others 
    $w ( '#box5' ). expand (); 
    $w ( "#box1" ). collapse (); 
    $w ( "#box2" ). collapse (); 
    $w ( "#box3" ). collapse (); 
    $w ( "#box4" ). collapse ();

})

7 
import wixWindow from 'wix-window';
$w.onReady(() => {

//Make Schedules Section expand with content change
//$w('#schedulesSection').collapse();

//on page load, hide all schedule boxes and menu selections EXCEPT Hei's
$w("#box2").collapse();
$w("#box3").collapse();
$w("#box4").collapse();
$w("#box5").collapse();

//$w('#scheduleMenuItemSelect1').show();
$w("#scheduleMenuItem1Hei").hide();

$w('#scheduleMenuItemSelect2').hide();
$w('#scheduleMenuItemSelect3').hide();
$w('#scheduleMenuItemSelect4').hide();
$w('#scheduleMenuItemSelect5').hide();


//Show Hei's Schedule
$w("#scheduleMenuItem1Hei").onClick( (event) => {
    $w('#scheduleMenuItemSelect1').show();
    $w("#scheduleMenuItem1Hei").hide();

    $w("#scheduleMenuItem2Liana").show();
    $w("#scheduleMenuItem3Leon").show();
    $w("#scheduleMenuItem4Wayne").show();
    $w("#scheduleMenuItem5Pam").show();

    $w('#scheduleMenuItemSelect2').hide();
    $w('#scheduleMenuItemSelect3').hide();
    $w('#scheduleMenuItemSelect4').hide();
    $w('#scheduleMenuItemSelect5').hide();

    //show box 1 and hide all others
        $w('#box1').expand();
        $w("#box2").collapse();
        $w("#box3").collapse();
        $w("#box4").collapse();
        $w("#box5").collapse();
})

//Show Liana's Schedule
$w("#scheduleMenuItem2Liana").onClick( (event) => {
    $w('#scheduleMenuItemSelect2').show();
    $w("#scheduleMenuItem2Liana").hide();

    $w("#scheduleMenuItem1Hei").show();
    $w("#scheduleMenuItem3Leon").show();
    $w("#scheduleMenuItem4Wayne").show();
    $w("#scheduleMenuItem5Pam").show();

    $w('#scheduleMenuItemSelect1').hide();
    $w('#scheduleMenuItemSelect3').hide();
    $w('#scheduleMenuItemSelect4').hide();
    $w('#scheduleMenuItemSelect5').hide();

    //show box 2 and hide all others
        $w('#box2').expand();
        $w("#box1").collapse();
        $w("#box3").collapse();
        $w("#box4").collapse();
        $w("#box5").collapse();
})

//Show Leon's Schedule
$w("#scheduleMenuItem3Leon").onClick( (event) => {
    $w('#scheduleMenuItemSelect3').show();
    $w("#scheduleMenuItem3Leon").hide();

    $w("#scheduleMenuItem1Hei").show();
    $w("#scheduleMenuItem2Liana").show();
    $w("#scheduleMenuItem4Wayne").show();
    $w("#scheduleMenuItem5Pam").show();

    $w('#scheduleMenuItemSelect1').hide();
    $w('#scheduleMenuItemSelect2').hide();
    $w('#scheduleMenuItemSelect4').hide();
    $w('#scheduleMenuItemSelect5').hide();

    //show box 3 and hide all others
        $w('#box3').expand();
        $w("#box1").collapse();
        $w("#box2").collapse();
        $w("#box4").collapse();
        $w("#box5").collapse();
})

//Show Wayne's Schedule
$w("#scheduleMenuItem4Wayne").onClick( (event) => {
    $w('#scheduleMenuItemSelect4').show();
    $w("#scheduleMenuItem4Wayne").hide();

    $w("#scheduleMenuItem1Hei").show();
    $w("#scheduleMenuItem2Liana").show();
    $w("#scheduleMenuItem3Leon").show();
    $w("#scheduleMenuItem5Pam").show();

    $w('#scheduleMenuItemSelect1').hide();
    $w('#scheduleMenuItemSelect2').hide();
    $w('#scheduleMenuItemSelect3').hide();
    $w('#scheduleMenuItemSelect5').hide();

    //show box 4 and hide all others
        $w('#box4').expand();
        $w("#box1").collapse();
        $w("#box2").collapse();
        $w("#box3").collapse();
        $w("#box5").collapse();
})

//Show Pam's Schedule
$w("#scheduleMenuItem5Pam").onClick( (event) => {
    $w('#scheduleMenuItemSelect5').show();
    $w("#scheduleMenuItem5Pam").hide();

    $w("#scheduleMenuItem1Hei").show();
    $w("#scheduleMenuItem2Liana").show();
    $w("#scheduleMenuItem3Leon").show();
    $w("#scheduleMenuItem4Wayne").show();

    $w('#scheduleMenuItemSelect1').hide();
    $w('#scheduleMenuItemSelect2').hide();
    $w('#scheduleMenuItemSelect3').hide();
    $w('#scheduleMenuItemSelect4').hide();

    //show box 5 and hide all others
        $w('#box5').expand();
        $w("#box1").collapse();
        $w("#box2").collapse();
        $w("#box3").collapse();
        $w("#box4").collapse();
})
})
//onclick open class information lightbox 
export function classTitle_click(event, $item) {
    let classTitle = $item('#classTitle').text

    console.log(classTitle)

    //pass database information filtered by title
    wixWindow.openLightbox('ClassInfo', classTitle) 
}
8

Thank you!