Resolved Resizing Images with Javascript [Archive]

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:

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:

<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

<!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

<!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

<!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:

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

img.src = newImg.src;

I could get the new dimensions.