Javascript SlideShow Application help

as4s1n

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
I am working on a slideshow script for my website and for some reason whenever it runs the script works just fine for the first two images I have and then for no reason I can see, prints one extra debug message and stops, not even going to three.

Javascript:
Code: 
// Variables
 
var 
i = -1,
images = new Array(),
delay,
img,
errors = new Array(),
debug = 1,
imgArrLen;
 
// Slideshow function
function slideShow() {
 
 if(debug == 1)
  document.getElementById("error").style.display = "block";
 
 // Error handler
 var error = document.getElementById("error");
 
 // Array length
 imgArrLen = images.length,
 
 // EH (1)
 errors.push("Get array [images] length");
 
 // Set delay into seconds (predefined on HTML side)
 delay = delay*1000;
 
 // EH (2)
 errors.push("Turn 'delay' into a seconds variable");
 
 // Get image id
 img = document.getElementById("image");
 
 // EH (3)
 errors.push("Get the image div");
 
 // Check whether i less than array length
 if(i < imgArrLen) {
 
 // EH (4)
 errors.push("Add one");
 
 // Add 1 to i
  i++;
 
 } else {
 
 // EH (4)
 errors.push("Return to 0");
 
 // Reset i to 0 if i is equal to the array length
 i=0;
 
 }
 
 // Change the image source
 img.src = images[i];
 
 // EH (5)
 errors.push("Apply the src change to image to images[i]");
 
 // Start the function again 
 setTimeout("slideShow('"+image+"')",delay);
 
 // EH (6)
 errors.push("Restart the application");
 
 // EH separater
 errors.push("------------------------------ ");
 
 // Print EH to page
 error.innerHTML += errors.join("p");
 
}

HTML:
HTML: 
<html>
<head>
<script type="text/javascript" language="JavaScript" src="slideShow.js"></script>
<script type="text/javascript" language="JavaScript">
images = ['images/i1.jpg','images/i2.jpg','images/i3.jpg']; // Array of images
delay = 1; // Delay between slides in seconds
</script>
<style type="text/css">
div#error {
 height:300px;
 overflow:auto;
 display:none;
}
</style>
</head>
<body onload="slideShow()">
<img src="i1.jpg" id="image" width="200" height="200" onclick="window.open(this.src)" />
<div id="error"></div>
</body>
</html>

Thank you in advance.
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Code: 
 delay = delay*1000;

Before first call, delay is 1
After first call, delay is 1000
After second call, delay is 1000000 . The function worked. You just didn't wait 1000 seconds to see it work.

Set the global delay to be in milliseconds.
Remove the above line.
OR
Global delay in seconds
Local t_delay = delay*1000 ; in milliseconds.

Once you fix that problem, you will find another.

Code: 
if(i < imgArrLen) {
 
 // EH (4)
 errors.push("Add one");
 
 // Add 1 to i
  i++;
 
 } else {
 
 // EH (4)
 errors.push("Return to 0");
 
 // Reset i to 0 if i is equal to the array length
 i=0;
 
 }

What happens when you start the function with i == 3?

3 < imgArrLen

so i++ makes i == 4

and you are beyond the end of your array.

Code: 
i++ ;

if( i >= imgArrLen) {
 
  i=0;

}

works.
 
as4s1n

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
Thank you descalzo. I did notice another error with my script as well.

arrays indices start at 0 so I had to change imgArrLen from images.length; to (images.length-1) otherwise it would repeat the last object or show up blank

If anyone else wants to use this feel free.

Code: 
/***************************
Author: Nick Williams
Must stay intact for use
***************************/

// Variables (DO NOT MODIFY ANYTHING ON THIS PAGE)
 
var 
i = -1,
images = new Array(),
delay,
img,
imgArrLen;

// Slideshow function
function slideShow() { 
 // Array length
 imgArrLen = (images.length-1),
 
 // Get image id
 img = document.getElementById("image");
 
if( i >= imgArrLen)
  i=0;
 else 
  i++;
  
 // Change the image source
 img.src = images[i];
 
 // Start the function again 
 setTimeout("slideShow()",delay);
}

HTML (<head>) :
HTML: 
<script type="text/javascript" language="JavaScript" src="slideShow.js"></script>
<script type="text/javascript" language="JavaScript">
<!--
// Only change these variables
images = ['i1.gif','i2.gif','i3.gif','i4.gif','i5.gif']; // Array of images (Add or subtract as necessary (put each within ''s))
delay = 4; // Delay between slides in seconds (4 or more is reccommended);
// Do not edit below this line
// ---------------------
delay = delay*1000;
-->
</script>

HTML (<body>) :
HTML: 
<body onload="slideShow()">
<img src="i1.gif" id="image" width="200" height="200" onclick="window.open(this.src)" />

By default clicking on the image will open the full image in a new window/tab
 
Last edited:
as4s1n

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
Edit: I forgot to apply the preloading images;

apply this just before the img.src = images; section:

Code: 
// ...

var image = new Image();
image.src = images[i];
img.src = images[i];

// ...

Note: this replaces img.src = images; as well as adds the new code
 
You must log in or register to reply here.
Top