resize image help

resize image help

Hi.

I am trying to create an image rotator, where the big image is fixed within a div. The thumbnail images used in the rotator are all the same size, but the main image represented by one of the thumbnails can be any size.

What I would like to do, is load the big image, get the width/height of the big image and resize & center it within the main image div so that the proportions of the image are maintained and the main image div remains the same size.

I have been using the code found in this tutorial as a base: http://designm.ag/tutorials/image-rotator-css-jquery/

I have the following code:
function centerImage() {

   var newImg = $(".main_image img");
    var mainImageHeight = $(".main_image").height(); //Find the height of the "block"
   var mainImageWidth = $(".main_image").width(); //Find the height of the "block"   
   var width = $(newImg).width();
   var height =$(newImg).height();
   //alert( "1: " + width + " x " + height + " [" + mainImageWidth + " x " + mainImageHeight + "]" );
   if(width===0){width = $(newImg).attr("width");}
   if(height===0){height = $(newImg).attr("height");}
   
   alert( "2: " + width + " x " + height + " [" + mainImageWidth + " x " + mainImageHeight + "]" );
   
   var top = (mainImageHeight - height) / 2;
   var left = (mainImageWidth - width) / 2;
   if ( ( mainImageWidth < width ) || ( mainImageHeight < height ) )
   {      
   var widthRatio = width/mainImageWidth;
   var heightRatio = height/mainImageHeight;
   var ratio = heightRatio;
   left = ((width*mainImageWidth)/2)*-1;
   top = 0;   
   if(widthRatio>heightRatio)
   {
      ratio = widthRatio;         
      top = 0;
      left = 0;   
   }
   
   // calculate the new sizes from the ratio...
   width = Math.round(width/ratio);
   height = Math.round(height/ratio);               
   $(newImg).width(width).height(height);
    }
    alert( "3: " + width + " x " + height + " [" + mainImageWidth + " x " + mainImageHeight + "]" );
    $(newImg).css({
        marginTop: (mainImageHeight - height) / 2,
        marginLeft: (mainImageWidth - width) / 2,
        width: width,
      height: height
    });
 
};


And this is called using this:
...

$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
         $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,   marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity      
         $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag);
         $(".main_image img").load(function(){         
             centerImage();
         }).animate({ opacity: 1}, 250 );
      });
...


The problem I am having is that the newImg width and height are ALWAYS the same. The width and height are always the settings for the first image, and regardeless of the fact a new image has loaded and the centerImage function is called on load, I never get the new image dimensions.

How can I ask for the new image dimensions?

Any help would be appreciated.

I am using jQuery 1.3.2