Can't automatically change slide in Lightbox onReady function.

Ask the community
,
1

Hi!

I have created a multistep form by using a slideshow in a Lightbox. When a user clicks the button on the homepage the Lightbox opens (no problem here) but I would like it to open, not on the first slide, but the third slide.

I’ve placed the code in the onReady function, but while all the code around it executes fine, it doesn’t actually do the slide change (though it works fine if done via a button click).

The code (automatic change of slide) also works when the same code is placed in a onReady function on a separate page (ie not a Lightbox).

I’ve tried putting delays and putting the code in .then functions (for example to execute the code after the slideshow expanded etc) but I can’t get it to work consistently.

Any ideas?

import wixWindow from 'wix-window';

$w.onReady(function () {
    let contextData = wixWindow.lightbox.getContext()
    console.log(contextData)
    
    / the slide does change automatically when the code is placed on a new page, but not when it is in a Lightbox
    $w('#slideshow').expand()
    $w('#slideshow').changeSlide(3)
    
    // trying to get it to work by adding some delays etc
    /
    $w('#slideshow').expand().then(() => {
            console.log('slideshow is rendered')
            $w('#slideshow').changeSlide(3)
                $w('#slideshow').expand().then(() => {
                    $w('#slideshow').changeSlide(3)
                    $w("#mainNavGroup").show().then(() => {
                        $w('#slideshow').changeSlide(3)
                        console.log('test')
                        $w('#slideshow').changeSlide(3)
                        console.log('test')
                        $w('#slideshow').changeSlide(3)
                        $w('#slideshow').changeSlide(3)
                        $w('#slideshow').changeSlide(3)
                    }).then(() => {
                        $w('#slideshow').changeSlide(3)
                        console.log('test')
                    })
                    console.log('done')
               })      
        })
    })
2

You have some errors:

  1. You’re not commenting correctly. Use // not just a single /

  2. You have a repetitive line to change the slide to index3. You should only have it one time.

  3. Get rid of all the promise chaining (the .then() parts). You don’t need it here

  4. If the first slide to show is number3, why wouldn’t it make it the first slide (then you won’t have to slide it with code)
    Think about something like:

//don't make it hidden onload, only collapsed
//...
$w('#slideshow').changeSlide(3).then($w('#slideshow').expand);
//..
3

Thanks for your response.

Yeah sorry the code I posted is just for context. I put the comments in manually. Please ignore the errors.

The point is that the code works (the slide changes) when the code is on a page and the page is loaded. But it doesn’t work (well it works sometimes but inconsistently) when it is in a Lightbox.

The reason that the slide is not the first slide is that in most cases the first slide needs to the the first slide. I only want it to go the third slide when certain contextData is provided (ie, when a different button is pressed on the home page).

4

Bullet points 2-3 are still relevant.

$w.onReady(function () {
    let contextData = wixWindow.lightbox.getContext();
    if(contextData.someKey === 'someValue'){
        $w('#slideshow').changeSlide(3).then($w('#slideshow').expand);
        }
})
5

I tried your suggestion:
$w ( ‘#slideshow’ ). changeSlide ( 3 ). then ( $w ( ‘#slideshow’ ). expand );

It still doesn’t work.

Please remember the .then chaining was simply done to see if the delays would get the slide change to execute as they should - so it’s just experimentation.

Again, the main issue is - why can I get the slide to automatically change when the code in in the onReady function on a normal page, but not in the Lightbox. What can I do to make this work?

import wixWindow from 'wix-window';

$w.onReady(function () {

    let contextData = wixWindow.lightbox.getContext() //passing 'search'
    console.log(contextData)
  
    $w('#slideshow').expand()
    if (contextData == 'search') {
        $w('#slideshow').changeSlide(3)
    }
    
 })
6

@jonatandor35 Thanks. I tried this but it also doesn’t work in the Lightbox onReady (it works on the page)

7

The contextData should be an object , but in your code you treat it as if it was a string .

An example for contextData:

//ON PAGE
wixWindow.openLightbox('Lightbox Name', {search: true});

//ON LIGHTBOX
let contextData = wixWindow.lightbox.getContext()
if(contextData?.search){//etc..
8

@jonatandor35 Yes, thank you. In this case I did pass a string. Nonetheless the code should work? Why doesn’t it?

Ie. why does the slide change when it is on a normal page’s onReady function but not in a Lightbox’s onReady function. And is there a workaround?

9

I found a workaround - it works if I wrap the slide change in a .then() after a scrollTo function, but it does add half a second of delay. So if there’s a better solution I’m all eyes.

 let contextData = wixWindow.lightbox.getContext();
    if(contextData?.search){
        wixWindow.scrollTo(0,0,{"scrollAnimation": false}).then(() => {
           $w('#slideshow').changeSlide(3)
        })
        }