jQuery colorbox : How can I change the position of the colorbox

Question

By default the colorbox appears centered both vertically and horizontally on the screen. Is there a way to change that, for example to 10% from top vertically and centered horizontally?

Answer 1

This will override the top position, and you can do the same with left etc:

#colorbox { top: 100px !important; }

10% from top would be trickier, you'd have to implement your own positioning logic in an onload callback everytime the colorbox is shown, or extend colorbox's code, but no quick way to do that.

UPDATE

Colorbox now has a built-in option to do this:

$("a").colorbox({ top: 100, left: "50%" })

UPDATE 2

If you're not bound to colorbox, I highly recommend using qTip2.
Far better position handling (jQuery UI style), cleaner HTML output and easier IE<8 support.

Answer 2

I had to override colorbox position on the fly and found the following solution :

In jquery.colorbox.js, the publicMethod.position function use a cached version of settings. To modify settings.left/top on the fly, we need to use the object settings property. To achieve this, we need to replace settings.top/left by this.settings.top/left within the function (ln 499):

 if(typeof this.settings!="undefined"){
    settings.left=this.settings.left;
    settings.top=this.settings.top;
 }
 if (settings.right !== false) {...

Now, we can change object position :

$.colorbox.settings.left=newLeft;
$.colorbox.settings.top=newTop;
$.colorbox.position();

Answer 3

You can use a colorbox setting when you initialize the colorbox. For example, to have the #colorbox at the same height of where you clicked, use this (.colorbox is the user defined colorbox class):

$(".colorbox").each(function(i) {
    var offset = $(this).offset();
    $(this).colorbox({top:offset.top});
});

You can also for example set a minimum top and make the #colorbox a little higher

$(".colorbox").each(function(i) {
    var offset = $(this).offset();
    var o = offset.top-200;
    if(o<100){o=100;}
    $(this).colorbox({top:o});
});

Answer 4

#cboxWrapper{
  position:fixed;
  top:100px;
  left:300px;
  z-index:9999;
  overflow:hidden;
}

Apply this style in your JSP or other web pages.