jQuery Forum

I have made a script that can resize a image to the "Max Width" on load.
And then when you click the image you can switch between the orginal size and scaled size.

But ther are a problem with it sometime makes the image 10 px x 10 px. when the image is 800x600 and the max width is 700.
I think this have something to do with it getting the org image size before the image has loadet complety.
But i have tryed all day and just can't get it to work.

demo: http://beta.cosplaydenmark.dk/Albums/1000/1001/

here is the code.

var imgState = 'large';
var MaxWidth = 700;
var orgWidth;
var orgHeight;
var scaleWidth;
var scaleHeight;

$(document).ready(function(){
   orgWidth = $("#showimage").width();
   orgHeight = $("#showimage").height();
   
   if(orgWidth > MaxWidth)
   {
      scaleWidth = MaxWidth;
      scaleHeight = (MaxWidth/orgWidth)*orgHeight;
   }
   else
   {
      scaleWidth = orgWidth;
      scaleHeight = orgHeight;
   }
   Resize('fast');
   $("#showimage").click(function(){
      Resize('slow');
   });
});
function Resize(type)
{
   if(imgState == 'small')
   {
      $("#showimage").animate({ height: orgHeight, width: orgWidth }, type);
      $(".resizeDiv").hide(type);
      imgState = 'large';
   }
   else
   {
      $("#showimage").animate({ height: scaleHeight, width: scaleWidth }, type);
      $(".resizeDiv").show(type);
      imgState = 'small';
   }
}