jquery colorbox looks wrong the first time opened and then fine after that

I'm trying to dynamically (using ajax) get some content and create a modal (using the colorbox plugin) with it. The problem is that the content has some images in it. I think that the modal doesn't count them in it's height or width calculation or some开发者_StackOverflow社区thing. So if you close the modal and then open it it looks fine. (The first time you open it, it has the scroll bars to access the rest of the modal).

Ideas?

It looks like you just have to add the image's height and width attributes. Like so:

<img src="/path/to/image.jpg" width="100px" height="100px" />

Agree with @Matthew, but here's why:

The reason for the behavior you are seeing is straightforward: the images acquired by Ajax aren't in the DOM when you call ColorBox the first time, by definition. So the plug-in has no way of knowing the image size.

The answer works because it supplies that info.

You could also specify the size of the window ColorBox opens using any of the plugin's sizing parameters, and perhaps dynamically set them if that works better for you.

See http://colorpowered.com/colorbox for a list of all the parameters.

I solved the problem this way:

jQuery('.colorbox').colorbox({
  width:700,
  height:460
});

you can resize the box on complete action:

jQuery('.colorbox').colorbox({
        onComplete: function () {
            $(this).colorbox.resize();
        }
});