[SOLVED] Colorbox slideshows resizing images to very small sizes when imagecache resized images are shown

We had faced a peculiar problem with slideshow in colorbox in one of our Drupal projects. Everything works well before an image cache is set to slideshow images to make them same in size. After setting this image cache, colorbox slideshow begin to behave so strangely by showing a very small window with scroll bar and images are hardly visible. Please refer the image below. But after refreshing page images appears with expected size. But loading another page, and returns to the previously loaded page also make the situation again.

To find what exactly cause the problem we have done the following steps.

• First we have loaded the image explicitly in browser to make sure that the image is properly loading and it works well.
• Second step was to load slideshow again, but still image was not visible inside colorbox.

Actually what was going on was that, if we are not setting width and height to the contents loaded inside the colorbox, colorbox will check the the size of the content to find the dimensions to use inside the colorbox. So in our case, we are loading images using ajax and when colorbox calculates the dimensions before the image is completely loaded. That is why it appears with small width and size. So we set height and width to image inside colorbox, and slideshow works like a charm.

<div class="main-image-colorbox">
  <img width="750px" height="550px" src="path_to_image"/>
</div>

Hope this will be helpful.

Reference

1. http://www.jacklmoore.com/colorbox/faq