PDA

View Full Version : Help with Javascript Slideshow with Dynamic Text also

brunobits
03-08-2008, 05:06 PM
Hello, upon searching I found this site and I'm hoping someone might be able to help me. I found a script that allows me to make a slideshow using Javascript.

I was wondering if anyone could tell me how to add descriptive text to the array and have it change when the text does.

Here is the code I'm using.

Can also be seen in action at http://www.leatherconnexion.com/testimonials/speciality/index.html


<html>
<head>
<title>Leather Connexion Saddlebag Slideshow</title>
<script language="JavaScript">
<!--
var interval = 10000;
var random_display = 0;
var image_dir = "../../images/new_gallery/specialityleather/"


var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "1650 stoned oil tan-2.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "1650 stoned oil tan.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "4000 taco 001.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "4000 taco 008.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "4000 taco.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "Stoned Oil Tan 001.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "Stoned Oil Tan 002.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "Stoned Oil Tan 003.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "Stoned Oil Tan 004.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "stoned oil tan-3.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "stoned oil tan-4.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "taco 001.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "taco leather 020.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "sportbag.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "7100 12F 002.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "6000 flap 004.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "2950 bright red 002.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "2000 tan oil brown 008.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "12.14 008.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "narrow gussett 001.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "2000 005.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "SportBG_BK-Throwover3.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "RAB-20 - TP-1 BN-ANT BR Buckle.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "RAB-10 White front.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "RAB-10 -2 White back view.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "Beechnut group.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "greybags.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "greybags1.jpg");
var number_of_image = 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, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

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

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

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}


// -->
</script>
</head>
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img border="0" src="../../images/new_gallery/player/player_top.jpg" width="526" height="6"></td>
</tr>
<tr>
<td background="../../images/new_gallery/player/player_left.jpg"><img border="0" src="../../images/new_gallery/player/player_left.jpg" width="8" height="384"></td>
<td valign="middle" align="center" bgcolor="#000000">
<p align="center"><img name="rImage" src="../../images/new_gallery/specialityleather/4000 taco 008.jpg"></p>
</td>
<td background="../../images/new_gallery/player/player_right.jpg"><img border="0" src="../../images/new_gallery/player/player_right.jpg" width="8" height="384"></td>
</tr>
<tr>
<td width="526" colspan="3" height="74" background="../../images/new_gallery/player/player_bottom.jpg">
<div align="center">
<center>
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<p align="center"><font face="verdana, helvetica" size=1>
<a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><IMG SRC="../../images/new_gallery/player/back.jpg" alt="Previous" border="0" width="50" height="50"></a>
<a href="#" onClick="rotateImage('rImage')"><IMG SRC="../../images/new_gallery/player/play.jpg" alt="Play" border="0" width="50" height="50"></a>
<a href="#" onClick="clearTimeout(timerID)"><IMG SRC="../../images/new_gallery/player/pause.jpg" alt="Pause" border="0" width="50" height="50"></a>
<a href="#" onClick="rotateImage('rImage');clearTimeout(timerID)"><IMG SRC="../../images/new_gallery/player/fwd.jpg" alt="Next" border="0" width="50" height="50"></a></font></p>
</td>
</tr>

</table>
</center>
</div>
</td>
</tr>
<TR>
<td colspan="3" align="center"><FONT color="ffffff">Play will begin a 10s slide show<BR>&copy;2008 LeatherConnexion.com</font></td>
</tr>
</table>
<p>&nbsp;</p>
<table border=0 cellpadding=4 cellspacing=0>
<tr>
<td class="td" align=center>
<p></td>
</tr>
<tr>
<td class="td" align=center>
</td>
</tr>
</table>
</body>
</html>



Any help would be greatly appreciated

Thank You