Forum Moderators: open
If anyone can please help me out with this I would greatly appreciate it. Drop some pointers please. My brain is numb from trying to get it to work with a text title.
Here is the code:
<html>
<head><title>Slideshow</title>
<script language="JavaScript" type="text/javascript">
var interval = 1500; // The interval variable indicates the length of the pause between image swapping.
var random_display = 0; // random_display variable tells the script whether to dispaly the slide show images at random or order
var image_dir = "/images/" // Directory were images are kept
var imageNum = 0;
var picDir = new Array() // Create an array of all the images used in the slide show
picDir[imageNum++] = new imageItem(image_dir+"pic1.jpg","Title One");
picDir[imageNum++] = new imageItem(image_dir+"pic2.jpg","Title Two");
picDir[imageNum++] = new imageItem(image_dir+"pic3.jpg","Title Three");
picDir[imageNum++] = new imageItem(image_dir+"pic4.jpg","Title Four");
picDir[imageNum++] = new imageItem(image_dir+"pic5.jpg","Title Five");
picDir[imageNum++] = new imageItem(image_dir+"pic6.jpg","Title Six");
picDir[imageNum++] = new imageItem(image_dir+"pic7.jpg","Title Seven");
picDir[imageNum++] = new imageItem(image_dir+"pic8.jpg","Title Eight");
var imageCount = picDir.length; // Take a count of all the images in the array
// Create functions to tell the script what to use for each image's location
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
if (imageObj!= null) { // add an if statement and have it check to see if imgObj is null.
return(imageObj.image_item.src)// If it isn't, do the regular code
} else if (imageObj == null) {// if it is null, have the value of imgObj be the value of picDir[imageNum+imageCount]
imageObj = picDir[imageNum+imageCount];// So in other words imageNum = 0 and imageCount = 5
return(imageObj.image_item.src)// Then adding them and having the script start from the last pic to the first all over again.
}
}
// create a function to generate some random index numbers to display random images
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
// Find out which image will be displayed
function getNextImage() {
if (random_display) {
imageNum = randNum(0, imageCount-1);
} else {
imageNum = (imageNum+1) % imageCount;
}
var new_image = get_ImageItemLocation(picDir[imageNum]);
return(new_image);
}
// Add a previous image button to go back on the images
function getPrevImage() {
imageNum = (imageNum-1) % imageCount;
var new_image = get_ImageItemLocation(picDir[imageNum]);
return(new_image);
}
// Call the right value for new_image
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
// Create a function called switchImage, use the getNextImage function and use JavaScript's setTimeout method to change the image
// Depending on what value initialized in our "interval" variable.
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 onLoad="switchImage('imgSlide');">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="250" height="155">
<img name="imgSlide" src="" width="250" height="155" border="0">
</td>
</tr>
<tr>
<td width="250" height="40" style="font-family: Verdana, Arial; font-weight:10; font-size:12px;">
<div name="title"></div>
</td>
</tr>
<tr>
<td width="250" align="center">
<a href="#" onClick="prevImage('imgSlide'); clearTimeout(timerID);"> previous</a> ¦¦
<a href="#" onClick="switchImage('imgSlide'); clearTimeout(timerID);">next </a>
</td>
</tr>
<tr>
<td width="250" align="center">
<a href="#" onClick="switchImage('imgSlide');">play slide show</a> ¦¦
<a href="#" onClick="clearTimeout(timerID);"> pause</a>
</td>
</tr>
</table>
</body>
</html>
Thank You very much in advance.
Make each item in picDir an array, like this:
picDir[imageNum++] = new Array(new imageItem(image_dir+"pic1.jpg"),"Title One");
Make function get_ImageItemLocation return the location of the first item in the current picDir array:
return imageObj[0].image_item.src;
(twice)
Make the functions getNextImage and getPrevImage return an array, containing the image.src and the title:
var new_image = get_ImageItemLocation(picDir[imageNum]);
var new_title = picDir[imageNum][1];
return new Array(new_image, new_title);
In getPrevImage, the counter could return -1. Use this in stead:
imageNum = (imageNum-1 > -1)? imageNum-1 : imageCount-1;
prevImage and switchImage will now be returned arrays. So:
var new_set = getPrevImage(); // getNextImage() for switchImage
document[place].src = new_set[0];
document.getElementById('title').innerHTML = new_set[1];
That last line should write the title into the div you named 'title'. <div id="title"></div> should do the job. The innerHTML property is supported by IE5+, Moz0.9+ and Opera7+, but not by previous century Navigators.
Hope this helps...
It's working great! I wanted to ask you what this line of code is doing exactly.
imageNum = (imageNum-1 > -1)? imageNum-1 : imageCount-1;
Thanks and I greatly appreciate the help. If you want the code I can go ahead and send it your way. Just let me know. Oh, and anyone else for that matter.
>> imageNum = (imageNum-1 > -1)? imageNum-1 : imageCount-1;
It's just short for
if (imageNum-1 > -1) {
imageNum = imageNum-1;
} else {
imageNum = imageCount-1;
}
Basically, the syntax is like this:
condition ? if true, do stuff : if false, do other stuff
Thanks so much. I really appreciate it. :)
(imageNum-1 > -1)
And you do it this way for type casting, right?
Tom
I guess that
if (imagenum > 0)if (imagenum-1 > -1)
First a definition.
Typecast, verb. 1) To make an actor always play the same type of role. 2) When programming, to ensure that a variable is of the expected type (e.g. integer, string, floating point number).
So in other words, I could have the following
imageNum = "0" (for whatever reason, say it was sent as a "get" parameter and interpreted as a string)
The string "0" might be interpreted as a positive integer (equal to the ASCII value of the character "3" for example).
In some languages (and I don't know about Javascript, which is why I ask), you could force that string to be treated as an integer by saying
imageNum = imageNum + 0
So I wondered whether or not that's what you were doing.
Otherwise
if (imageNum - 1 > -1)
is the same as
if (imageNum > 0)
is the same as
if (imageNum) // assuming that imageNum will never have a negative value.
Again, I'm not saying this is how to do it in Javascript, I'm asking the question, since I just started reading this forum in hopes of getting a basic start in Javascript and to see how things work.
Tom
var foo = "bar";
if (foo) // codeIn the script in msg#7 I was not trying to do any type conversion: imageNum already was an integer, which comes handy if you're using a variable as a counter.
By pure coincidence it would have been the right way to convert a string to a number - almost. The right way, without changing the value, would be
number = string - 0;
Jordan
So the in Javascript, assuming imageNum = "3" (string)
(imageNum - 1 > -1) same as (imageNum > 0) same as (imageNum)
That all makes sense enough and is as I would expect, it's the
document.something.somethingelse.property.method.foreigntranslation.elementID.more.stuff.than.I.know
that makes me head spin.
Tom
