Jquery - Customizing the colorbox plugin

Question

I'm using the colorbox plugin for modal popups. It's working nicely, but there's a main thing about it that seems wrong.

I have a form that pops up, and on submitting (or clicking a link) in the form, this might open another "colorbox" modal. It works smoothly, but there's one thing that bothers me.

As it is, colorbox seems to wait until it receives the response (via ajax) and then shows a "loading.gif" and starts to change size.

To me it makes more sense to have the "loading.gif" show as soon as they are opening a new colorbox modal. (and not just the image, I just mean that whatever happens when you open a new colorbox) It doesn't have to resize (obviously) but it's just annoying because some of my colorbox modals use webservices that are slow, so you might submit a form and nothing happens for literally 1 or 2 seconds. It'd be nice if it just would look like it was loading the next one for that time.

Ideas on how to do this?

Answer 1

It looks like the loading graphic is being shown onLoad, and the script tries to figure out the content type before this point. So if you have a slow web service, it may take time to realize the content type, thus not showing the loading.gif.

I did a quick test, and displaying the gif onOpen seems to work:

$(".myClass").colorbox({
   onOpen:function(){
       // taken from colorbox.css 
       $('#cboxLoadingGraphic').show(); 
    },
    onComplete:function(){ 
       $('#cboxLoadingGraphic').hide(); 
    }
});