jQuery colorbox positioning image wrong ( not centering )

Question

I am using the jQuery plugin Colorbox for some images on This page.

If you look at the main product image in the center, right below it are some little polaroid-looking thumbnails. If you click on one it pops up an image using Colorbox

If you make your browser window about 800px wide (the width of the page content) the popup will be centered. However as you widen the browser window the popup will drift more and more to the right (not staying in center).

Anyone know how I can fix this?

Answer 1

Well I was able to fix it by changing this line:

posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

to

posLeft = Math.max(800 - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

in jquery.colorbox.js

However a solution that doesn't envolve changing the source of the plugin and making it less dynamic would be ideal.

Answer 2

If the body tag is set to "position:relative" ColorBox will not accurately calculate the center of the page.

Answer 3

colorbox.css

#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}

replace with

#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat center center;}

Answer 4

I was having a problem with it not vertically aligning correctly, and I figured out that the solution is to use jQuery's .height() and .width() functions instead of document.documentElement.clientHeight and .clientWidth. So the posTop and posLeft variables should be set like this:

posTop = Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2 + $window.scrollTop(),

posLeft = Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2 + $window.scrollLeft();

Answer 5

I had the same problem, and my body was not set to "position:relative".

This may not be the best solution, but you can fix it without modifying the plugin code, just by using the onComplete event :

$('img.colorbox').colorbox({onComplete: function() {
     $('#colorbox').css('left', ((window.innerWidth - $('#colorbox').width()) / 2) + 'px');
} });

The colorbox will load and appear not centered, and then be immediately repositionned. The user will see the transition, but the box is centered.

This is still not ideal, but does not involve changes in the plugin