PDA

View Full Version : 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/dynamicindex14/preloadslide.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

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


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