slideshow image size [Archive]

homeport

04-03-2003, 03:30 PM

I downloaded one of the Slideshow codes which allow a group of images (i.e. *.jpg) to fade in and out, one by one. However, in all of the slideshows, I note that each of the images must be of the same size. If not, they look distorted (compressed or stretched out).

What code segment can be inserted into the source code to accept the image regardless of size (within reason, of course)? I use Win98 and IE6.0.

Thanks

russ801

04-03-2003, 04:03 PM

I have a slide show that has images that are either landscape or portrait.

I use a table to control the layout. I am sure that there are some CSS methods that are better, but that is for phase 2:D. The key is not to size the image, size the cell.

Russ

<SCRIPT language="JavaScript1.2">





<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000;
// Duration of crossfade (seconds)
var crossFadeDuration = 0;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'Onstage/Opera0022V.jpg'
Pic[1] = 'Onstage/Opera0054V.jpg'
Pic[2] = 'Onstage/Opera0055V.jpg'
Pic[3] = 'Onstage/Opera0037V.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;

var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
//document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
}

document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Apply();

document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</SCRIPT> </HEAD>
<BODY ><SCRIPT language="JavaScript1.2" type="text/javascript">
var winpicload=window.onload;
window.onload=function()
{
if (winpicload) winpicload();
runSlideShow();
}

</SCRIPT>
<BR><BR>
<BR>
<TABLE border="0" height="385" cellpadding="0" cellspacing="0" align="left">
<COL span="1" align="left">
<TBODY>
<TR align="left">
<TD align="left" height="285" valign="top" width="390"><IMG src="Onstage/Opera0022V.jpg" name="SlideShow" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>