Resizing Images with Javascript

**Int** · 07-29-2009, 02:38 AM

I'm currently creating a portfolio website for a friend of mine, so they can display and sell their artwork. There is a grid of thumbnails on the right, and when one of the thumbnails is clicked, a larger version of the image appears in the center of the page.
Some of their illustrations are quite large, so I've been trying to write a script that will resize them to a maximum width and/or height of 500px when they appear as a larger version, but for some reason only the image that is first clicked will resize the central image correctly.

Here's my code:

Code:

function dispImage(newSrc)
	{
	if (document.images['enlargedImage'].src == '')
		{
		document.images['enlargedImage'].src=newSrc;
		}
		
	var oldHeight = document.images['enlargedImage'].height;
	var oldWidth = document.images['enlargedImage'].width;
	var aspectRatio = oldHeight/oldWidth;
	
	if (500/aspectRatio < 500)
		{
		newHeight = 500;
		newWidth = 500 / aspectRatio;
		}
	else
		{
		newHeight = 500 * aspectRatio;
		newWidth = 500;
		}
		
	document.images['enlargedImage'].src = newSrc;
	document.images['enlargedImage'].height = newHeight;
	document.images['enlargedImage'].width = newWidth;
	
	}

enlargedImage refers to the image in which the large version of the thumbnail appears.
Example HTML of one of the thumbnails:

Code:

<img src="images/uploads/thumb_1248826052.jpg" onClick="dispImage('images/uploads/l_1248826052.jpg')">

So the first image that is clicked on will resize enlargedImage correctly. But if any other images are clicked after that, enlargedImage will not resize.
I have a feeling I'm going about this the wrong way, but my experience with Javascript is not that much so I'm not sure.

**vwphillips** · 07-29-2009, 10:29 AM

A simple resize script

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

function Resize(img,maxwidth){
 var w=img.width,h=img.height;
 var r=maxwidth/w;
 if (r<1){
  img.width=w*r;
  img.height=h*r;
 }
}
/*]]>*/
</script>
</head>

<body onload="Resize(document.getElementById('tst'),400);">

<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="800" height="400" />

</body>

</html>

The problem is that the large images will take time to load so the initial size will will be wrong.

post a link to the page and i will work something out

**vwphillips** · 07-29-2009, 11:07 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

function LoadIMG(sec) {
 var oop=new Load(sec);
 return oop;
}

function Load(sec){
 this.sec=sec||10;
 this.img=new Image();
 this.to=null;
}

Load.prototype.NewImage=function(src){
 this.img.src=src
 this.srt=new Date();
 clearTimeout(this.to);
 this.load();
}

Load.prototype.load=function(src){
 if (this.img.width>50){
  Resize(this.img)
 }
 else if ((new Date()-this.srt)/1000<this.sec){
  oop=this;
  this.to=setTimeout(function(){ oop.load(); },100);
 }
}

var maxwidth=500;

function Resize(newimg){
 var img=document.getElementById('tst');
 img.src=newimg.src;
 img.width=newimg.width;
 img.height=newimg.height;
 var w=img.width,h=img.height;
 var r=maxwidth/w;
// if (r<1){     to allow images less than maxwidth
  img.width=w*r;
  img.height=h*r;
// }
}
/*]]>*/
</script>
</head>

<body onload="F=LoadIMG(10);">

<img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onclick="F.NewImage('http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
<img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onclick="F.NewImage('http://www.vicsjavascripts.org.uk/StdImages/Three.gif');" />
<br />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="800" height="400" />

</body>

</html>

**Int** · 07-30-2009, 09:13 AM

Originally Posted by vwphillips

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

function LoadIMG(sec) {
 var oop=new Load(sec);
 return oop;
}

function Load(sec){
 this.sec=sec||10;
 this.img=new Image();
 this.to=null;
}

Load.prototype.NewImage=function(src){
 this.img.src=src
 this.srt=new Date();
 clearTimeout(this.to);
 this.load();
}

Load.prototype.load=function(src){
 if (this.img.width>50){
  Resize(this.img)
 }
 else if ((new Date()-this.srt)/1000<this.sec){
  oop=this;
  this.to=setTimeout(function(){ oop.load(); },100);
 }
}

var maxwidth=500;

function Resize(newimg){
 var img=document.getElementById('tst');
 img.src=newimg.src;
 img.width=newimg.width;
 img.height=newimg.height;
 var w=img.width,h=img.height;
 var r=maxwidth/w;
// if (r<1){     to allow images less than maxwidth
  img.width=w*r;
  img.height=h*r;
// }
}
/*]]>*/
</script>
</head>

<body onload="F=LoadIMG(10);">

<img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onclick="F.NewImage('http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
<img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onclick="F.NewImage('http://www.vicsjavascripts.org.uk/StdImages/Three.gif');" />
<br />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="800" height="400" />

</body>

</html>

This got me going in the right direction, thanks.
I realised that by only changing the source, I couldn't get the height and width of the new image. But by doing something like:

Code:

	newImg= new Image();
	newImg.src= newSrc;
	var aspectRatio = newImg.height/newImg.width;

	img.src = newImg.src;

I could get the new dimensions.

Thread: Resizing Images with Javascript

Thread Tools

Search Thread

Resizing Images with Javascript

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions