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: /

Thanks in advance!

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!

• javascript
• jquery
• colorbox

• I would hide the color box with display:none !important and then see if there is an event for when the ajax load is complete and then set the color box to display:block – Pedro Estrada Commented Dec 19, 2012 at 14:38
• @PedroEstrada that sounds like a quick hack for something that should be appropriately fixed with javascript though. :/ I'm not keep on using display: none as it slows down page load – Michelle Commented Dec 19, 2012 at 14:42

4 Answers 4

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

I changed the following in the CSS -

#colorbox{border: 1px solid #ebebeb;}    
#cboxContent{background:#fff; overflow:hidden;padding: 20px;}

to this -

#colorbox{border: 0px solid #ebebeb;}
#cboxContent{background:#fff; overflow:hidden;padding: 0px; margin: 0px;}

And the box is hidden until it expands to show the content. I'm not sure if that will be detrimental to your overall style though. You should be able to manipulate the margin of the form so that you get white space around it.

http://jsfiddle.net/hPEXf/1/

I was working with ColorBox few days ago so I believe I'm quite fresh on the topic. Did You consider using built-in callbacks?

Specifically onOpen and onComplete?

If we go with the padding solution mentioned by Jay you can set padding to 0 in the onOpen and set it back to desired value in the onComplete.

It seems to be a clean solution.

I was working with

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

But it turns to black fade then open color-box when i'm working with transition:"fade" properties of colorbox.

Now i change my code in jquery.colorbox.js

comment or remove the below code in colorbox js file

                /*var initialWidth = setSize(settings.get('initialWidth'), 'x');
                var initialHeight = setSize(settings.get('initialHeight'), 'y');
                var maxWidth = settings.get('maxWidth');
                var maxHeight = settings.get('maxHeight');

                settings.w = (maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth;
                settings.h = (maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight;

                $loaded.css({width:'', height:settings.h});
                */


                /*$loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div,"LoadingGraphic")[0]]);  */                                                                

                 $slideshow = $tag('button', "Slideshow")/*,
                 $loadingOverlay*/

                 /*  clearTimeout(loadingTimer);
                 $loadingOverlay.hide();*/

                 /* loadingTimer = setTimeout(function () {
                 $loadingOverlay.show();
                  }, 100);*/

And change the below code

             overlay.css({
                    opacity: opacity === opacity ? opacity : '',
                    cursor: settings.get('overlayClose') ? 'pointer' : '',
                    visibility: 'visible'
              }).show(500);

To,

             setTimeout(function(){     
                 $overlay.css({
                       opacity: opacity === opacity ? opacity : '',
                       cursor: settings.get('overlayClose') ? 'pointer' : '',
                       visibility: 'visible'
                  }).fadeIn(500);
      }, 600);

and now it's working smoothly.