Javascript SlideShow Application help

**as4s1n** · 03-22-2010 01:27 PM

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

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

**descalzo** · 03-22-2010 02:03 PM

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** · 03-22-2010 02:20 PM

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

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

<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

**as4s1n** · 03-23-2010 02:29 PM

Edit: I forgot to apply the preloading images;

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

Code:

// ...

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

// ...

Note: this replaces img.src = images[i]; as well as adds the new code

Thread: Javascript SlideShow Application help

LinkBack

Thread Tools

Display

Javascript SlideShow Application help

Re: Javascript SlideShow Application help

Re: Javascript SlideShow Application help

Re: Javascript SlideShow Application help

Similar Threads

[REQ] [1500¢] Javascript Image Slideshow

¿Cómo hacer un Slideshow?

JS slideshow help

online image slideshow

Slideshow issue!!

Posting Permissions