fadeshow auto resize image

[randym56]

1) Script Title: fadeshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I cannot figure out how to force the image to resize to the fadewidth and/or fadeheight set in the script.

I need to be able to force the image size to the same width as the fadeshow box, but allow the height to dynamically resize proportionately to the width. This is easy in HTML by using <img src="images/title07.gif" alt="Contact" width="166">. This takes an image of any size and forces it to be 166px wide and dynamically resizes the hight to be the proportional hight so the image is not distorted.

Thanks in advance!
~Randy

[jscheuer1]

This is a bad idea. It is much better to resize your images in an image editing program, and to optimize them. This is the web after all, and performance counts.

However, if you insist upon doing this, find this function in the script and add the red part:


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img width="166" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

If you need it to adapt to the width you set in the call (like if you are doing this more than once on a page and the width is different in different slide shows), you can do:


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img width="'+this.fadewidth+'" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

instead, but you will also have to add (as shown in red):


function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.fadewidth=fadewidth
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nexti . . .