Image in colorbox not shown to full size when loaded for the first time in firefox

Can you try setting the width to auto, this is certainly something to do with colorbox not being able to calculate the correct dimensions of the image until it is cached, which is slightly odd since the explicit dimensions are there in the img tag.

Try something like:

#colorbox .media-gallery-item img {
  width: auto;
  height: auto;
}

I'm not very confident that will work, I'll need to set this up but time is against me at the moment.

I ran into a similar problem with my colorbox not expanding large enough to show the image clearly. What I found had to be done is in configuration, media, colorbox. There is a place to expand (by a check box if I remember correctly) the advanced options. Then you can change the settings of how the image should render in the colorbox. I set the Max height to 250% and unchecked the box for fixed.

Hmmm, also try this as well:

#colorbox .media-gallery-item img {
  max-width: none !important;
}

Could be the max-width tripping out the JS when its trying to calculate the image size, but really I am guessing, I don't know how this script calculates the correct image size, I thought it took it direct from the img element (some of the docs allude to that), but I don't think thats the whole story...

Can you give me a complete run down of what you are doing here - I just installed Colorbox (latest version) and it works without any issues.

Your lightbox looks different though, yours has gray borders whereas the one I am using is entirely white, and the captions are hidden until you hover the image (they slide up).

You'll need to give me a complete outline of the modules you have installed and your configuration, even better zip your test site up and send it to me or give me a link to download it from somewhere (with the database) so I can install it and pinpoint the exact issue.

OK, so what we really need to do is figure out what the difference in output of regular Colorbox and Media Gallery Colorbox. I figured this might be the case, since it worked fine with regular Colobox.

I added

img {
  max-width: none;
}

to my styles.custom.css and it solved the image problems I was having in IE8.

@AllyMediaGroup - while you may not care about maintaining the responsive image feature that is up to you, but this "fix" you have posted removes the responsiveness of ALL IMAGES. Its also already been tested (I posted this in #4), and several users, including me, found this to be a bit flaky and unreliable (might work for you, but not others, this is part of the problem).

@Jeff - Thank you for the information. And I realize that this is not a "fix". But until I figure out what is causing the issue I needed something to make the client happy. I appreciate all your hard work and so far I have liked Adaptive Themes and may still keep using them in the future. At least until I get better at creating custom themes/subthemes. I removed the media module and went with the regular colorbox and I was still having the issue. So even though I hate to do it, I figured out a hack to make it work. And I do mean I hate to hack anything. So please don't think that I am trying to make it seem that it is a problem with the theme. I just did what I had to do to get my client to stop calling me every couple hours wanting it fixed.

As reported earlier it does work with standard Colorbox already, out of the box, so not sure why you needed to use a fix.

I already know what the problem is, I figured it out ages ago - Media Module is clearly not using a standard Colorbox script - because that script is meant to read the width and height attributes in the image element to get the size (read the Colorbox help, its very clear on how this script is meant to work).

However, when Drupal 7 first shipped the width and height attributes were missing from generated image elements (they were considered a performance issue). I think that Media module tried to work around this by hacking the Colorbox script so it would work without those attributes. In more recent Drupal core releases height and width attributes ARE printed in image elements. Now I have not checked if the script is hacked or not, but simple logic dictates that they did something to make it work without those attributes (it could be a parameter or argument I am not aware of in the script), but me thinks the maintainer hacked it out of necessity - and in doing so created a bunch of issues for responsive themes.

I am actually going to close this as a "won't fix" for now because I cannot see how to keep the responsive images (with our current limited technology in Drupal), and support every single module that tries to treat images in some unique way. When building responsive themes its a simple fact that you need to think differently and seek solutions that work with responsive techniques.

I just had the exact same problem, which only occurred in Firefox and I found something to fix it.

First thing you need to check to make sure that my solution will work is this:

#colorbox .media-gallery-item img {
  max-width: none !important;
}

This css must force Firefox to load your image in its full size, even though the frame will still be minuscule and the overflow of the image will be hidden. However, now we can draw the width and height attributes from the image and force Colorbox to resize to the correct height and width. Create a javascript file and put this inside:

jQuery(document).ready(function(){
jQuery("a.media-gallery-thumb").colorbox({
					onComplete:function() { 
					var x = jQuery('div.lightbox-stack div.media-gallery-item div.gallery-thumb-outer div.gallery-thumb-inner a img').width();
					var y = jQuery('div.lightbox-stack div.media-gallery-item div.gallery-thumb-outer div.gallery-thumb-inner a img').height();
					jQuery(this).colorbox.resize({width:x, height:y});
					},
				});
});

(make sure to adjust css anchors if they don't match with yours)

Now flush all cache from Drupal, clear your browser cache and then depending on your Colorbox skin, adjust width and height variables a little bit, because they don't take borders into account, reducing the image size by some 50 pixels or so.

Hope it works for you, Jeff.

Solution in #13 works for me.

Thanks Bester!

You can also add this attributes to images inside colorbox:

#colorbox img {
  max-width: none;
  max-height: none;
}

When the js runs on the image for resizing it will see the default img height and width and make the correct calculations.

Hope it helps!

I had this issue. It was solved by removing a img {height:auto;} declaration for images earlier in the theme settings.

I'm experiencing this issue-- has it ever been fixed? Is it an issue with the Media Gallery module or the Colorbox module?

I was able to get Firefox to load inline HTML in a colorbox at the correct size by adding a delay to a resize in an OnComplete function: #2301539.
Another issue reported better behavior after removing an img {height: auto} as in #16 (#1421258).

#16 solved it for me. As soon as I removed img {height:auto;} declaration from my theme css file, the images started loading in their actual sizes in colorbox!

#16 solved it for me as well! Thanks for that. (I spent ages looking for the right solution)
The {height: auto;} declaration is standard in Drupal Zen Sass files; once removed > problem solved.

Same here! #16 fixed the issue, disabled height: auto; in my theme. Had the issue in both firefox and chrome.