How to make Lightboxes load faster?

Ask the community
1

Presently, there’s at least a 2 to 3 seconds lag to view the lightboxes. Is there a way to fix it?

2 Likes
2

Hey Vinay,
I’m Liron from the Editor X product team.
You can set up your lightbox to make it behave exactly as you need it to.
To make it appear at the time you want all you have to do is adjust the Delay in the Lightbox Settings which is automatically set to 2 seconds:

  1. Select the lightbox

  2. Click Set Triggers .

  3. Drag the Delay slider to increase or decrease the time between the page loading and the lightbox appearing.

2854×1422 367 KB

Thanks for reaching out!
Liron

3

When I use a button as a trigger, it takes forever for the lightbox to appear. and we do not have the “Delay” function if we use another trigger than the automatic mode.

4

Hey Gaston,
In your case, instead of using a lightbox, I would suggest using Velo code.
With Velo you can use a button as a trigger to show an element and set effects as duration and delay.

https://static.wixstatic.com/media/a27d24_c628bdfe7d5d4763981dc405cc31e9e9~mv2.gif(image larger than 4 MB)

Set the trigger element

  1. Add a Button and design it the way you want “#button2”

Set the popup element

  1. Add a Container “#box7”

  2. Add elements to the container (Images, Buttons…) and design the popup you want to create

  3. Don’t forget to add a ‘Close’ button or ‘X’ shape “#vectorImage2”

  4. Turn on Dev Mode (Tools), Select the Container “#box7” and set the its Default Values to [hidden] (Check the ‘Hidden’ box)

  5. Copy & Paste the Velo code and replace the ID of the element “#button2” , “#box7” and “#vectorImage2” according to your elements IDs. You can dispaly them in the Layers Panel

  6. Set the effectOptions values ( “duration” and “delay” ) and effectName( “fade”, “zoom”, “Fly” etc…) to control the different effects.

  7. Preview :slightly_smiling_face:

2860×1368 352 KB

Velo Description
The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element’s [hidden] property has been set to false.
You can optionally apply an effect when showing the element by providing an [effectName] value. You can also customize the effect by providing the optional [effectOptions] object.

Velo API Reference: https://www.wix.com/velo/reference/$w/image/show
Site Example: https://lironm8.editorx.io/velo-button-popup

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

export function button2_click(event) {
	let $item = $w.at(event.context);
	let fadeOptions = {
  "duration":   1000,
  "delay":      20
};

$w("#box7").show("fade", fadeOptions);

}

export function vectorImage2_click(event) {
let $item = $w.at(event.context);
	
	$item("#box7").hide();	

}

Please feel free to reach out again,
Liron

5

@lironm I’ll give it a try and I will give you feedback, thanks!

6

@tonchiswebmaster great! please let me know if you have any questions or concerns :slight_smile:

7

Excellent, looking forward to more features…

8

Hello,

I have a sort of similar issue. I want my lightbox to be an “Entry” page of my website. I want it to be the first thing people see when they connect to my website. However, even with no delay there is one second during loading when the homepage shows. Could you help me find a solution to this problem?

9

You could try animating the visible portions of the website behind the lightbox. For example, have the header and first section fade-in (or other animation) and then the lightbox loads.

It’s not too different also from a video with David Milan.

10

@Rob thank you for your help I’ll give it a try!