November 10th, 2006 | JavaScript, Web Development

JavaScript Image Resizing Control Script

7

Yahoo Stores can only take you so far. A client of mine uploads images of a product, if that image is too large it destroys the structure of the site. To fix this I would have to manually download all the images, resize them and re-upload them to Yahoo, or use JavaScript.

<script language="javascript" type="text/javascript">
<!--
function resize_images()
{
for (i = 0; i < document.images.length; i++)
{
while ( !document.images[i].complete )
{
break;
}
if ( document.images[i].width > 185 )
{
document.images[i].width = 185;
}
}
}
-->
</script>

It resizes all images. To avoid this one can edit the JavaScript to avoid images with a particular name, and/or use css background and text/image replacement techniques.
Since the script is controlled by the for statement loop, you can avoid resizing some images. Example: for (i = 0; i < document.images.length; i++) i = 0 is the image you start to resize, if this were 1 you would skip the first image. (say your first image was a header and didnt want to resize it) Where you findthe second 185 in the script is the minimum width an image must be for it to be resized. The second 185 controls the new width of your images. The last thing you must do is call the function in the body tag.

<body onLoad="resize_images();" >

This script creates a popping effect, which can be annoying, but ultimately it prevents a broken structure. Say the least it's a great temporary fix. I found javascript like this in Mike Lothar's PHPBB Theme Nosebleed v1.09

0 comments ↓

If you found this post useful click the share this button. Contribute below by adding a comment, no registration is required.


There are no comments yet...Kick things off by filling out the form below.

Leave a Comment