Preloader with Lightbox not working

Discussion Ask a question
,
1

I’ve just started using WiXCode and I’m very new for Javascript.

I was referring to WiX resource ‘https://www.wix.com/code/home/example/Preloader’
and I was trying to have a preloader that is connected to a Lightbox.
But somehow it is showing some error. You can refer to screen-recording: Monosnap

Surprisingly when I connect this with a ‘Box’ it works perfectly fine.

Here is the code that I’m using:

$w.onReady(() => {
	waitForLoading();
});

export function button6_onClick() {
	$w('#lightbox1').show();
	waitForLoading();
}

function waitForLoading() {
	setTimeout(() => {
		$w('#lightbox1').hide('FadeOut');
	}, 1500);
}

Also, do I really need to use this code?

export function button6_onClick() {
	$w('#lightbox1').show();
	waitForLoading();
}

Can someone please help.

Thanks,
Pawan

2

Hi Pawan,
Use openLightbox and close methods in order to open and close the lightbox.
Good luck!
Roi

3

Hi Roi,

Would be great help if you can show an example code here.

Thanks,
Pawan

4

Yes,

import wixWindow from 'wix-window'; 

$w.onReady(() => { 

}); 

export function button6_onClick() { 
    wixWindow.openLightbox("LightboxName"); 
}

And here is some code you need to add to the lightbox

import wixWindow from 'wix-window'; 

$w.onReady(() => {
    setTimeout(() => { 
        wixWindow.lightbox.close();
    }, 1500);
});

Roi

5

Thank you so much its working now.

6

Thank Roi.
But if the lightbox is acting as a preloader, how will you call to close the lightbox from the code on the page that indicates all data is loaded?

7

Hello, I read this discussion looking for a solution to the same problem and actually the problem of passing data when the page was finished I could not solve it. Do you have something in mind?

8

Hi Roi,

I’ve implemented this code on 2 websites.
On buth the websites sites gets loaded first and than the preloader.

https://lioonnize.wixsite.com/mezonic

Both the sites are pathatically slow cos of WiX, but I need to load preloader first.
Let me know what I’m doing wrong here.

Here is the code from the sites for both the pages (Preloader and site code)

Site : https://www.mindnifisant.com/

Page Site Code:

import wixWindow from 'wix-window'; 

$w.onReady(() => { 
    wixWindow.openLightbox("Preloader");
});

Preloader Code:

import wixWindow from 'wix-window'; 

$w.onReady(() => {
    setTimeout(() => { 
        wixWindow.lightbox.close('FadeOut');
    }, 1500);
});

Site: https://lioonnize.wixsite.com/mezonic

Page Site Code:

import wixWindow from 'wix-window'; 

$w.onReady(() => { 
    wixWindow.openLightbox("Preloader");
});

export function anchorheader_onviewportEnter() {
$w("#LogoB").show();
$w("#largeS").show();
$w("#MenuBar").show();
$w("#cart").show("FloatIn");
$w("#buynow").show();
$w("#LoginBar").show();
$w("#LogoS").hide();
$w("#smallstrip").hide();
$w("#MenuBox").hide("FloatOut");
}

export function anchorheader_onviewportLeave() {
$w("#LogoS").show();
$w("#smallstrip").show();
$w("#MenuBox").show();
    $w("#LogoB").hide();
$w("#largeS").hide();
$w("#MenuBar").hide("FloatOut");
$w("#cart").hide("FloatOut");
$w("#buynow").hide("FloatOut");
$w("#LoginBar").hide("FloatOut");
}

Preloader Code:

import wixWindow from 'wix-window'; 

$w.onReady(() => {
    setTimeout(() => { 
        wixWindow.lightbox.close('FadeOut');
    }, 1500);
});

Please help.

Thanks,
Pawan

9

I’ve just looked into using preloader…wix is so slow on mobile!! But I am seeing these forum strings on this code example of using lightboxes. I thought lightboxes did not work on mobile?

10

Hi Roi,

I’ve implemented this code on 2 websites.
On buth the websites sites gets loaded first and than the preloader.
https://www.mindnifisant.com/
https://www.mezonic.com

Both the sites are pathatically slow cos of WiX, but I need to load preloader first.
Let me know what I’m doing wrong here.

Here is the code from the sites for both the pages (Preloader and site code)

Site: https://www.mindnifisant.com/
Page Site Code:

import wixWindow from 'wix-window'; 
$w.onReady(() => { 
wixWindow.openLightbox("Preloader");
});

Preloader Code:

import wixWindow from 'wix-window'; 
$w.onReady(() => {
setTimeout(() => { 
wixWindow.lightbox.close('FadeOut');
}, 1500);
});

Site: https://www.mezonic.com
Page Site Code:

import wixWindow from 'wix-window'; 
$w.onReady(() => { 
wixWindow.openLightbox("Preloader");
});
export function anchorheader_onviewportEnter() {
$w("#LogoB").show();
$w("#largeS").show();
$w("#MenuBar").show();
$w("#cart").show("FloatIn");
$w("#buynow").show();
$w("#LoginBar").show();
$w("#LogoS").hide();
$w("#smallstrip").hide();
$w("#MenuBox").hide("FloatOut");
}
export function anchorheader_onviewportLeave() {
$w("#LogoS").show();
$w("#smallstrip").show();
$w("#MenuBox").show();
   $w("#LogoB").hide();
$w("#largeS").hide();
$w("#MenuBar").hide("FloatOut");
$w("#cart").hide("FloatOut");
$w("#buynow").hide("FloatOut");
$w("#LoginBar").hide("FloatOut");
}

Preloader Code:

import wixWindow from 'wix-window'; 
$w.onReady(() => {
setTimeout(() => { 
wixWindow.lightbox.close('FadeOut');
}, 1500);
});

Please help.

Thanks,
Pawan