How to make Lightboxes load faster?

Ask the community
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