...
PDA

slideshow changed help?

wakuwuaku
01-27-2009, 02:44 PM
Below is the javascript for my slideshow

<script language="JavaScript">
<!--
var interval = 2000;
var random_display = 0;
var imageDir = "Images/";

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "img1.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "img2.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "img3.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "img4.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "img5.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "img6.jpg");

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)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}
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 switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}




// -->
</script>

I have a play button pause button, next button and previous button.

Could I add a button that would change the "var random_display = 0"
value to 1 thus making my slideshow random? If so how?

Also I would like to add a go to last image in slidewhow button and a go to first image in slideshow button.

My other buttons look like this.
<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>

Thanks
vwphillips
01-27-2009, 05:48 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 language="JavaScript">
<!--
var interval = 2000;
var TO;
var imageDir = "http://www.vicsjavascripts.org.uk/StdImages/";

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "One.gif");
imageArray[imageNum++] = new imageItem(imageDir + "Two.gif");
imageArray[imageNum++] = new imageItem(imageDir + "Three.gif");
imageArray[imageNum++] = new imageItem(imageDir + "Four.gif");
imageArray[imageNum++] = new imageItem(imageDir + "Five.gif");
imageArray[imageNum++] = new imageItem(imageDir + "Six.gif");

var totalImages = imageArray.length;

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

function switchImage(place,mde) {
var obj=document.getElementById(place);
if (!obj.cnt) obj.cnt=0;
Stop(place);
if (typeof(mde)=='string'){
if (mde=='random'){
obj.cnt=randNum(0, totalImages-1);

}
else {
var cnt=mde-=1;
if (imageArray[cnt]) obj.cnt=cnt;
}
}
else {
if (mde==-1) obj.cnt=--obj.cnt%totalImages;
else obj.cnt=++obj.cnt%totalImages;
if (typeof(mde)=='boolean') TO = setTimeout(function(){ switchImage(place); }, interval);
}
obj.src =imageArray[obj.cnt].image_item.src;
return false;
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function Stop(place){
clearTimeout(TO);
}



// -->
</script></head>

<body>
<img id="slideImg" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" />

<a href="#" onClick="return switchImage('slideImg',true)">play slide show</a>

<a href="#" onClick="return Stop('slideImg');"> pause</a>

<a href="#" onClick="return switchImage('slideImg',-1);"> previous</a>

<a href="#" onClick="return switchImage('slideImg',1);">next </a>
<a href="#" onClick="return switchImage('slideImg','6');">goto 6 </a>
<a href="#" onClick="return switchImage('slideImg','1');">goto 1 </a>
<a href="#" onClick="return switchImage('slideImg','random');">random </a>
</body>

</html>
wakuwuaku
01-27-2009, 07:43 PM
None of these buttons work correctly, they just make the slideshow behave eratically.

any suggestions?
freedom_razor
01-28-2009, 07:29 PM
Code posted by vwphillips works with no problems on FF3 and IE7.
wakuwuaku
01-28-2009, 09:18 PM
Thanks for the code, my problem was that i was taking the buttons i needed and adding them to the code i already had.

the random button does not randomise the order however, it brings up a random image to start at then the order is sequential.
Philip M
01-28-2009, 09:29 PM
the random button does not randomise the order however, it brings up a random image to start at then the order is sequential.

I think you have already been treated very generously - it is advisable not to look a gift horse in the mouth. This forum is intended to help people overcome specific Javascript problems, and is not a free coding service or an arm of social security.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum