Automatic Image Resizer

Cat Arriola Sep 7, 2005

General

This script will resize a group of images to a preset maximum width. Useful for regulating picture size, especially on sites where images are posted at random by multiple users.


Live demo:

Notes

Created by: Cat Arriola
Web Site: http://astrodiva.journalspace.com/
Posted: September 7, 2005

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: automaticImageResizer.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Cat Arriola | http://astrodiva.journalspace.com/ */

function fixImgs(whichId, maxW) {
  var pix=document.getElementById(whichId).getElementsByTagName('img');
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fixImgs('photos', 108);  // ('element ID', maximum width)
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="automaticImageResizer.js"></script>

Body

Paste this code into the BODY section of your HTML document


<table id="photos" cellspacing="2">
<tr>
<td class="simple"><img src="sample1.jpg" alt="photo 1"></td>
<td class="simple"><img src="sample2.jpg" alt="photo 2"></td>
<td class="simple"><img src="sample3.jpg" alt="photo 3"></td>
</tr>
<tr>
<td class="simple" colspan="3"><b>Live demo:</b> <input type="button" value="Make width 80 pixels" onclick="fixImgs('photos', 80)"></td></tr>
</table>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details