Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com
//Modified in http://www.dynamicdrive.com/forums
//by jscheuer1 for first and last buttons and to validate
//This notice must remain for legal use
// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('photo1.jpg','photo2.jpg','photo3.jpg','photo4.jpg','photo5.jpg','photo6.jpg','photo7.jpg','photo8.jpg','photo9.jpg');
// DO NOT EDIT BELOW THIS LINE!
var theSlide=0;
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
// THIS WILL DISABLE THE BUTTONS (IE-ONLY)
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide(NextSlide);
else CacheNextSlide(CurrentSlide-1);
}
return true;
}
}
function Download() {
if (Slides[theSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
return true;
}
function CacheNextSlide(slide) {
theSlide=slide;
if ((theSlide < Slides.length) && (typeof Slides[theSlide] ==
'string'))
{ // ONLY CACHES THE IMAGES ONCE
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[theSlide] = CacheImage(Slides[theSlide]);
Download();
}
return true;
}
function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
Slides[Slides.length-1] = CacheImage(Slides[Slides.length-1]);
SlideReady = true;
ShowSlide(1);
}
function gotoFirst(){
CurrentSlide = 0;
ShowSlide(0);
}
function gotoLast(){
CurrentSlide = Slides.length-1;
ShowSlide(0);
}
</script>
</head>
<body onload="StartSlideShow()">
<form name="SlideShow" action="#">
<table>
<tr>
<td colspan="2"><img src="" name="Screen" width="140" height="225" alt=""></td>
</tr>
<tr>
<td><input type="button" name="Previous"
value="*<<*"
onclick="ShowSlide(-1);"></td>
<td align="right"><input type="button" name="Next"
value="*>>*" onclick="ShowSlide(1);"></td></tr>
<tr>
<td><input type="button" name="First"
value="*First*"
onclick="gotoFirst();"></td>
<td align="right"><input type="button" name="Last"
value="*Last*" onclick="gotoLast();"></td></tr>
</table>
</form>
</body>
</html>
Notes: Both the script and markup have been added to and altered. The script has two new functions and a new global variable. The sequential preloading routines have been altered to accommodate the new situation that arises if you skip to the end before caching all the images. The StartSlideShow() function has been added to - to cache the last image as well as the first. The markup has two new buttons and has been validated.
Junior Coders
Adding "First" and "Last" buttons to pre-loaded slideshow script
Posting Permissions
Reply With Quote
Bookmarks