Colorbox opens but image is not displayed

Not sure what happened here, it was working just fine, probably a plugin compatibility problem or some other compatibility issue. I do not have the time right now to track down the problem, but I came up with a dirty solution.

The image is actually there, just not viewable. The top and bottom borders all float under each other and the image won’t fit so it is forced out of the box and hidden. The problem is that the width and height of the #colorbox and #cboxWrapper are not getting the border width added.

Inspecting the border divs, I see the width is 21px. A quick look through the javascript files, jquery.colorbox.js has a couple of lines to define the interface width and height on lines 348 and 349. Doubling 21 (both the left and right sides, and both the top and bottom sides), I added 42 to the width and height. Now it looks perfect again.

Here is the code changes (added the ” + 42″):

interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height() + 42;//Subtraction needed for IE6
interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width() + 42;

The lightbox and highslide galleries do not have this problem, but I actually like the colorbox gallery.

I tried loading scripts in header and it still has the same problem.

Any ideas what causes this?

https://www.ads-software.com/extend/plugins/lightbox-gallery/