Preloaded slideshow script by Jason moon

**kazunoben** · 04-20-2005, 04:30 AM

I'm using this slideshow script in my website. Right now, I have not set a width and height in this line:

Firefox and Netscape 7.2 handle this fine, and display each image with its proper dimensions. IE, however, fails to display the images. If I set a width and a height, IE displays the images, but it and the other browsers cram every image into the same dimensions. Is there a way around this?

<html>
<head>
<title>Kyoto Slideshow</title>
<style type="text/css">
body {background-color: #000000}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<script language="JavaScript">
if (window.screen)
self.moveTo(0,0);
self.resizeTo(screen.availWidth, screen.availHeight);

//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('Photo album/Kyoto photos/a_east kyoto street.jpg','Photo album/Kyoto photos/b_east kyoto street - close.jpg');

// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}

function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
// THIS WILL DISABLE THE BUTTONS (IE-ONLY)
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}

function Download() {
if (Slides[NextSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
return true;
}

function CacheNextSlide() {
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{ // ONLY CACHES THE IMAGES ONCE
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}

function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>

</head>

<body onLoad="StartSlideShow()">
<br>
<br>
<br>
<form name="SlideShow">
<table align="center">
<tr>
<td colspan=2><img name="Screen" width= height=></td>
</tr>
<tr>
<td><input type="button" name="Previous"
value=" << "
onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next"
value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>

</body>
</html>

**jscheuer1** · 04-20-2005, 05:36 AM

Code:

<td colspan=2><img name="Screen"></td>

and you might want to add something like this to the td tag:

Code:

<td colspan=2 height=175 width=150 align=center valign=middle>

setting it to the height of your tallest image + 5 and the width of your widest image + 5. This will keep things from jumping around so much.

**kazunoben** · 04-20-2005, 11:09 PM

Thanks, I'll give it a try!

**kazunoben** · 04-20-2005, 11:19 PM

Well, that helped the buttons stay in the same place from slide to slide, but IE still won't display the images.

**jscheuer1** · 04-21-2005, 03:58 AM

Works here with the demo, what version of IE are you using? Also, this looks suspect:

Originally Posted by kazunoben

Code:

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('Photo album/Kyoto photos/a_east kyoto street.jpg','Photo album/Kyoto photos/b_east kyoto street - close.jpg');

I'm referring to the spaces in the path and file names. You can try:

Code:

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('Photo%20album/Kyoto%20photos/a_east%20kyoto%20street.jpg','Photo%20album/Kyoto%20photos/b_east%20kyoto%20street%20-%20close.jpg');

however, the best bet is to put the images in directories that have no spaces in their names and to use filenames without spaces in them either. On some servers, even dashes and capital letters can be a problem. Use all lowercase letters and if you want breaks in the names use the underscore _ character, like: file_name.ext

**kazunoben** · 04-22-2005, 12:43 AM

Thanks for your response. I realized the answer was in your first response.

It seems that the problem is that IE interprets

as meaning

whereas Firefox, Netscape, and Opera intepret it as no width or height having been specified, and therefore they are flexible depending on the image loaded. They then use the appropriate dimensions for each image.

Instead of including the width and height attributes and leaving values blank, I just let them out. IE has no problem, no. Thanks!

Thread: Preloaded slideshow script by Jason moon

Thread Tools

Search Thread

Preloaded slideshow script by Jason moon

Bookmarks

Bookmarks

Posting Permissions