[Javascript] Resize all images dynamically.

[shawn.milo at gmail.com (Shawn Milo)]

Recently, I was stumped. A user wanted to be able to upload images to
my ASP app, but have thumbnails displayed, and a new window to open
with the full-size picture if the thumbnail was clicked.

I couldn't find any solution in ASP, without buying a plug-in. I
didn't want to install ImageMagick on the server and run a shell
command because I didn't want to add another dependency.

Instead, I fell back on good old JavaScript to do it for me. I resize
the images dynamically and each image is a link to a new window
containing the full-size image.

Caveat:
Yes, I know I'm loading the full-size image and just making it look
smaller, and that this is inefficient. However, the originals aren't
too huge and it's only available within the intranet. Also, the
alternative is that the PR person e-mails the pictures to everyone in
the company, which bogs down the e-mail.

Just thought I'd throw this out there in case anyone could use it, or
anyone had any constructive feedback.

Thanks,
Shawn


function resizeImages(){

   maxSize = 100;

   for (x=0;x<document.images.length;x++){
      iHeight = document.images[x].height;
      iWidth = document.images[x].width;

      if (iHeight > iWidth){
         sizeGuide = iHeight;
         size2 = iWidth;
      }else{
         sizeGuide = iWidth;
         size2 = iHeight;
      }


      if (sizeGuide > maxSize){

         sizeRatio = sizeGuide / size2;
         newSize1 = maxSize;
         newSize2 = newSize1 / sizeRatio;

         if (iHeight > iWidth){
            document.images[x].height = newSize1;
            document.images[x].width = newSize2;
         }else{
            document.images[x].width = newSize1;
            document.images[x].height = newSize2;
         }




      }


   }

}