...

View Full Version : Slide Show not initializing



calebandchels
12-29-2010, 02:59 PM
My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong?
here is my js

var interval = 1500; //1.5 secs
var random_display = 0; //goes in order
//defines where the images are stored
var imageDir = "../image/slideshow1/";

//set images here
var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "02.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "03.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "04.jpg");

//find total amount of images using .length
var totalImages = imageArray.length;

function imageItem(image_location){
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

//This is used if random is set to 1
function randNum(x, y){
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

//get next image
function getNextImage(){
if(random_display){
imageNum = randNum(0, totalImages-1);
} else{
imageNum = (imageNum+1) % totalImages;
}
//return the value now.
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}

function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

//function to switch images
function switchImage(place){
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
Here is the html with buttons to control the slideshow

<div id = "articles">
<div class= "new_article">
<img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0>
<a href="#" onClick="switchImage('slideImg')">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
</div>
</div>

vwphillips
12-29-2010, 04:18 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var timerID=null;
var random_display=false;
var interval=1000;


var imageNum = 0;
imageArray = [];
imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg');
imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg');
imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg');
imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg');

//find total amount of images using .length
var totalImages = imageArray.length;

function imageItem(image_location){
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

//This is used if random is set to 1
function randNum(x, y){
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

//get next image
function getNextImage(){
if(random_display){
imageNum = randNum(0, totalImages-1);
} else{
imageNum = (imageNum+1) % totalImages;
}
//return the value now.
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}

function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

//function to switch images
function switchImage(place){
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
/*]]>*/
</script></head>

<body>
<div id = "articles">
<div class= "new_article">
<img name="slideImg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" style = "width:400px; height:200px;" border=0>
<a href="#" onClick="switchImage('slideImg')">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
</div>
</div>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum