Search code examples
jquerypositionpositioningcolorbox

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

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?

Solution

  • 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.