Use images instead of the default form buttons

**spyder** · 05-11-2010, 10:13 AM

1) Script Title: Preloaded Slide Show Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...eloadslide.htm

3) Describe problem:
a) would somebody please help my switch the "buttons" into images?
b) less importantly, is it possible to have the script preload 2 or 3 images instead of just one?

thank you very much

**vwphillips** · 05-11-2010, 10:48 AM

note the use od Ids in place of names
this will initially preload 3 images then the third image ahead on next image

Code:

<!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">

//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');

// DO NOT EDIT BELOW THIS LINE!
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.getElementById('Previous').style.visibility = (NextSlide == 0)?'hidden':'visible';
      document.getElementById('Next').style.visibility = (NextSlide == (Slides.length-1))?'hidden':'visible';

 if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
            document.getElementById('Screen').src = Slides[NextSlide].src;
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' +Slides.length;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

function Download() {
   if (Slides[NextSlide].complete&&Slides[NextSlide].width>40) {
      SlideReady = true;
      self.defaultStatus = Message;
   }
   else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
   return true;
}

function CacheNextSlide() {
   if (Slides[NextSlide+3] && (typeof Slides[NextSlide+3] =='string')){ // ONLY CACHES THE IMAGES ONCE
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide] = CacheImage(Slides[NextSlide+3]);
     Download();
   }
   return true;
}

var SlideReady = true;
var CurrentSlide = -1;

function StartSlideShow() {
   for (var z0=0;z0<4;z0++){
    if  (Slides[z0]){
     Slides[z0] = CacheImage(Slides[z0]);
    }
   }
   ShowSlide(1);
}
</script>
</head>

<body onLoad="StartSlideShow()">
<form name="SlideShow">
<table>
<tr>
   <td colspan=2><img id="Screen" width=108 height=135></td>
</tr>
<tr>
   <td>
<img id="Next" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="50" height="20" onClick="ShowSlide(1)" />
</td>
   <td align="right">
   <img id="Previous" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="50" height="20" onClick="ShowSlide(-1)" />
</td>
</table>
</form>
</body>

</html>

**spyder** · 05-12-2010, 06:32 AM

this is great, thank you!

i encountered one small issue. if you put in 5 or more images then its past teh 0rigional "real" images, and it tries to load up images "6" and "7" which dont exist. is there an easy fix for this issue?

thank you again

**vwphillips** · 05-12-2010, 12:05 PM

oops

change this function

Code:

function CacheNextSlide() {
   if (Slides[NextSlide+3] && (typeof Slides[NextSlide+3] =='string')){ // ONLY CACHES THE IMAGES ONCE
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide+3] = CacheImage(Slides[NextSlide+3]);
     Download();
   }
   return true;
}

**spyder** · 05-12-2010, 09:05 PM

you are amazing. thank you thank you thank you. it all works great now

Thread: Use images instead of the default form buttons

Thread Tools

Search Thread

Use images instead of the default form buttons

Bookmarks

Bookmarks

Posting Permissions