PDA

View Full Version : Adding "First" and "Last" buttons to pre-loaded slideshow script



TabithaDas
10-14-2006, 06:28 PM
1) Script Title: Preloaded Slideshow Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/preloadslide.htm

3) Describe problem:
I'd like to be able to add two buttons to the script so that the user can jump to the first image or last image in the group. Is this possible? I searched the forum and couldn't find any answers... :(

I would greatly appreciate any help!! Thanks!

Tabitha

jscheuer1
10-15-2006, 07:26 AM
<!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.

TabithaDas
10-16-2006, 08:07 PM
Works beautifully! Thank you so much!!!!! :)