Image scaling in a slide-show

Hi,

I have a small application which gets an array of URLs of pictures of a user. My application then shows these pictures in a 120px X 120px slide-show in a random order. Since the pictures are going to be different resolutions (And I don’t have control over that), I need to correctly scale the images to fit inside the box. This is the best logic that I could come up with:

[CODE]
<div id=”apDiv2″ align=”center”><img id=”apOwnerPic” style=”border:2px solid red; max-width:120px; max-height:120px” src=”pic1.png” alt=”Unknown name” /></div>

function littleAnimator() {
var rand_no = Math.floor(picsArray.length*Math.random());
var theImg = document.getElementById(“apOwnerPic”);
scaleMainImage(theImg, picsArray[rand_no], ownerName);
}

function scaleMainImage(img, src, alt)
{
if(img.src == src) return;
img.vspace = 0;
img.style.visibility = “hidden”; // Hide the image and show it only after all changes are done
img.src = src;
img.alt = alt;
var boundaryX = 120;
var boundaryY = 120;
var imageX = img.width;
var imageY = img.height;
if ((img != null && img.width > 0 && img.height > 0) && (img.width > boundaryX || img.height > boundaryY))
{
var scaleX = boundaryX / imageX;
var scaleY = boundaryY / imageY;

if (scaleX < scaleY)
{
imageX = imageX * scaleX;
imageY = imageY * scaleX;
}
else
{
imageX = imageX * scaleY;
imageY = imageY * scaleY;
}
img.style.width = imageX;
img.style.height = imageY;
}
img.vspace = Math.floor(((boundaryY-imageY)/2));
img.style.visibility = “visible”;
}[/CODE]

I see two problems here.

I am a noob in the HTML/Javascript world .. so maybe this problem can be fixed very easily. Oh, and I don’t have the option of importing other Javascript files. So all logic needs to reside in this one file.

Also in #JavaScript _↴