Adding preloader for a lightbox.2020

Ask the community
,
1

Hi guys,

Every post that I found is about adding a preloader for loading the website.
But I want to add a preloader for when someone clicks on a button that open’s a lightbox.
Now I have multiple buttons over multiple pages that open the same lightbox.

Here is the code so far.

$w.onReady(() => {
waitForLoading();
});
export function button3_click(event) {
$w(‘#preloader’).show();
waitForLoading();
}
function waitForLoading() {
setTimeout(() => {
$w(‘#preloader’).hide(‘FadeOut’);
}, 1500);
}
I’m sure alot of you of have seen this before.
Now the preloader .Gif does appear and vanish, that’s all good.
But my lightbox does not appear. The button is still link to the lightbox. But nothing happens after the .Gif vanishes.

Thx for any help.

2

You can try removing the link and use code instead. Something like:

import wixWindow from 'wix-window';
$w.onReady(() => {
    $w('#button1').onClick(event => {
    $w('#preloader').expand()
    .then(() => {
        Promise.all([
        wixWindow.openLightbox('LightBoxName'),
        setTimeout(() => {$w('#preloader').collapse()},     1500)]);
        })
    })
});
3

Thx for the help, but this doesn’t work at all, unless I’m missing something, I copy pasted and changed the names. With this code nothing happens.
I’m just trying to add the part only to open the lightbox after the delay.

4

Am I missing something here?

import wixWindow from ‘wix-window’;
export function button3_click(event) {
wixWindow.openLightbox(“box1”);
}

Shouldn’t this open the lightbox?

5

Yes that is how you simply link a button to open a lightbox through code.

import wixWindow from 'wix-window';

$w.onReady(function () {
});

export function button3_click(event) {
wixWindow.openLightbox("box1");
}

However, you asked in your original post ‘I want to add a preloader for when someone clicks on a button that open’s a lightbox.’

Now note that in your original code taken from the Wix Preloader example, it will not open the lightbox as you have not stated in that code for it to open the lightbox after the preloader event happens.

Also, note that in your original post you also stated ‘The button is still link to the lightbox. But nothing happens after the .Gif vanishes.’

Again here as you have used code on your page for the preloader to work when you press your button 3, you need to be doing the link for it in that code as well.

As J.D. mentioned in his reply to you, to NOT use the button link in the editor itself and to have it all setup through your code.

So that is what J.D. give you a sample code for in his reply.

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w('#button1').onClick(event => {
    $w('#preloader').expand()
    .then(() => {
        Promise.all([
        wixWindow.openLightbox('LightBoxName'),
        setTimeout(() => {$w('#preloader').collapse()},     1500)]);
        })
    })
});

You DO NOT have the button itself linked to the lightbox on the page.

The user still clicks on the button to open the lightbox, however the code then expands your preloader element and collapses it after 1500 milliseconds when your lightbox opens.

6

Also, make sure you take off the lightbox settings for it to open automatically.
https://support.wix.com/en/article/setting-which-page-your-lightbox-appears-on

7

I’m sorry but I should of mentioned before, I did take off the link between my button and the lightbox.

But Now I have a bigger problem, the code to open a lightbox does not even work. Before I add a preloader, I want to know why the open lightbox code does not work.

I copy pasted

import wixWindow from 'wix-window';

$w.onReady(function () {
});

export function button3_click(event) {
wixWindow.openLightbox("box1");
}

I change the name of my lightbox to “box1”, I added a onclick event on my button and changed the name to button3. That’s it right? What I’m I missing here? This is using a fresh new button and lightbox.

How come this is not working?

8

@givemeawhisky I did also change that

9

I’m freaking out here, I started a brand new site, Blank template. I added a button and a lightbox. That’s it. I added the code, change the ID’s and change the settings for the lightbox to NOT open automatically.

and still the code does not work, what I’m I doing wrong?

10

It works all fine for me on a test site here for preloader then open lightbox page and also simple button for open lightbox page.
https://givemeawhisky.wixsite.com/mysite-19

11

GOS I really appreciate all your help, but still this is not working.
here is my example site.
https://michaelmain11.wixsite.com/mysite
when you click on the button the preloader appears for the 1500. But then no Lightbox.
I copy pasted your code from the site you link. The only ID changed was the lightbox, the rest is the same as your code.

Honestly I feel like someone is playing a trick on me, this makes no sense.
Both of us using same code. But It’s not working for me.

Here is a screenshot of the code

887×720 9.82 KB

Here is a screenshot of the ID’s for button and preloader

1428×762 155 KB

and here is a screenshot of the lightbox ID.

1350×729 122 KB

12

Okay, you should be using the actual lightbox name here and not the lightbox element id name.

You need to use the elements id name only where the element used in the code starts with a # as in #yourlightboxidname

To change the actual lightbox name itself, you can do that the same as the page name settings.
https://support.wix.com/en/article/renaming-a-lightbox

So for the preloader page test and I have changed the name of the lightbox to ‘Lightbox’ and the button only page test I have changed the name of the lightbox to ‘box’

So the preloader page test has the code like this:

//rest of code//
wixWindow.openLightbox('Lightbox'),
setTimeout(() => { $w('#preloader').collapse() },
//rest of code//

So you notice that the lightbox uses the actual lightbox name in your site structure, which for the preloader page is ‘Lightbox’, whilst the element containing your preloader image uses the id name of the element with the ‘#’ in front of it.

With the button only page test having the code like this:

//rest of code//
wixWindow.openLightbox("box");
//rest of code//

So you notice that the lightbox uses the actual lightbox name in your site structure, which for the button only page is ‘box’.

13

GOS THX YOU! I knew it was something stupid. God bless your patience man :slight_smile: your awesome!.