jQuery colorbox: how do I prevent the loading indicator small box from appearing before the main colorbox content does?

Question

I'm using jQuery colorbox to load a login form (via ajax). However, this little small box shows up for a few seconds, then it fades into the actual content that I want to load. So after observing several colorbox examples on the website, I'm somewhat sure that the little box is supposed to be a pre-loading box. Is there any way I could disable this box from appearing entirely?

I've tried silly things like tweaking the CSS and setting display: none to all loading items, but it doesn't work.

I want to avoid any CSS hacks and solve this problem by modifying the javascript. Ideally, some way for the loading box to never show up, as I won't be using colorbox for anything that takes a long time to load.

Recreated the problem on jsfiddle using my modified colorbox javascript and CSS. The ajax content won't load there, but the little box that I want to get rid of still shows up: http://jsfiddle.net/hPEXf/

Thanks in advance!

Answer 1

As @op1ekun said ColorBox has two events that are useful in your situation.

onOpen -> Callback that fires right before ColorBox begins to open.

onComplete -> Callback that fires right after loaded content is displayed.

It seems simply just hiding lightbox using either display:none or $("#colorbox").hide() don't work. so I used opacity to hide the lightbox while content gets loaded. I've set up a jsfiddle by forking yours http://jsfiddle.net/fDd6v/2/ that demonstrate this in action. Here is the code that has been used:

$(function(){
    $("#awesome-link").colorbox({
        onOpen: function(){
            $("#colorbox").css("opacity", 0);
        },
        onComplete: function(){
            $("#colorbox").css("opacity", 1);
        }
    });
});

• Refrence: ColorBox - a jQuery lightbox Events/Callbacks docs