Hi everyone,
I have set up a sidebar menu on my site that opens up a lightbox to show contact details etc. However, the delay of the lightbox opening is painfully slow to the point where I will click it again to open because I keep thinking it didn’t work the first time…
Just to be clear, I’m talking about the delay from the initial click, not the animation delay.
Please help!
Have you checked the lightbox settings to make sure that the delay is set to zero?
Also, if a lightbox is still too slow for you, then maybe simply look at using a hidden on load box on the specific page.
Or if it is on all pages, then put the code to show the hidden box in your site tab.
Thanks. Yes delay is set to zero, that’s not the problem. It’s the initial loading time from the click to opening. It’s on all pages - it’s a sidebar that slides out to show more info.
How and what code should I ad?
I am facing the same issue with Lightboxes. If we do this method of hidden box on load, would it be possible to close the box when user clicks outside of it? The method I can think of is making another box that acts as a button with an onClick to trigger the popped up box to close, but this does not seem the best method.
Hi Sam, I found this thread:
https://www.wix.com/corvid/forum/community-discussion/removing-the-delay-of-a-lightbox
It has some more info you can look into. I am attempting to replace the lightbox with a box instead, but this gives me some limitations like not being able to easily change the color of the area outside the box and also closing it when user clicks on the outside area as well.
If you’re keeping the lightbox … one solution for now would be to let the user know that a lightbox is loading.
The moment a user clicks a menu or button that loads a lightbox, show a loading gif.
You can turn it off when the lightbox closes.
$w("#preloader").show('fade');
wixWindow.openLightbox("myLightbox").then(dataObj => {
$w("#preloader").hide('fade');
});
Hi, thanks! I would like to keep the lightbox as I’m not sure how to set up any other way. I’ve got it set up like the image below. Each button opens a different lightbox that slides out. The fade idea you suggest would be nice but the code didn’t work for me. Do I need to change it?
Ideally though I want to reduce the delay…
found two great links that will help … both I’ve used
Hey Sean, that second video is great and is what I currently have. However it is the delay it takes to open that is the problem. Do you know how to fix this?
@sam37594 - sorry I should have explained better … it’s the first video that is most relevant. I read on a forum that you are better using a pop up box … already hidden but loaded rather than a lightbox. When you click on the burger icon it‘s an instant pop up. I couldn’t find out how to do this until I found the video. It explains how you open and close the box - You can put your menu inside a box.
I am also facing this and have not found a good answer. I am growing frustrated.
I am using the lightbox as a drawer (side menu)
I want it to only appear on one specific page
I want it to be closed by default, and only open when the user takes a specific action on the page
Any mechanism I’ve tried to open it causes a multi second delay (even if there is nearly NOTHING inside the lightbox that would take time to render, and no code executing in onReady)
Previously, it was suggested to simply set the delay in the lightbox settings to 0. THIS DOES NOT WORK.
You can only set this property if the lightbox is set to “Automatically display lightbox on pages”. If you want the lightbox closed when the page loads, and only open when a user takes an explicit action, you cannot use this.
Even if you do set this property to 0, THERE IS STILL AN UNACCEPTABLE DELAY of several seconds. Again, this is in a lightbox that has nothing in it and no code in onReady. It shouldn’t be taking several seconds to execute NO CODE, and then render a DOM with just a couple of elements in it.
People have made suggestions like rolling your own by using a container box. I tried adding a box that is the entire height of the page + footer, then pinning it so it doesn’t scroll. Then I added buttons to open and close it and set the animation to glide in. This works okay on desktop, but…horrible on mobile. Using this solution will require a lot of noodling to make it functional on mobile, or probably a separate UI altogether.
Also, I’m not sure what’s up with the animations. The drawer glides in only once. The next time I cycle through hide/show it doesn’t animate.
There is ONE benefit of using this approach over a lightbox. And that is the way it communicates with the rest of the page. Lightboxes cannot talk to the page until they’re closed, at which time you pass a context object back and forth between the page and the lightbox. So it is impossible to update state on the page depending on user interactions inside the lightbox. You can do this with a container, because it is actually IN the page, and not in its own context.
Given the choice between rolling my own component, where I have to get everything correct for every possible form factor, and using a lightbox (and accepting that I can’t pass information back and forth while the lightbox is open), I’ll take the latter. But if opening a lightbox takes 2 seconds, they are basically UNUSABLE.
WIX…Can you give us a REAL solution to this?
I also have the same problem and adding lightbox prefetchPageResources also did not solve the delay issue.
WIX Team, any update on this one?
GOS, I tried using a hidden on load box.
