PDA

View Full Version : Need to replace slideshow script button

push
01-31-2003, 07:57 PM
Hi!

I'm using the preloaded slide show script seen here:
http://www.dynamicdrive.com/dynamicindex14/preloadslide.htm

I'd like to replace the big grey 'next' and 'previous' buttons with preferably a text link, or an image. I've been trying to do so for the past couple days with some help but haven't been able to make it work.

Here is the original code:

<td><input type="button" name="Previous"
value="_<<_"
onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next"
value="_>>_" onClick="ShowSlide(1)"></td>

Here is how I tried to modify it (one of many ways):

<td><a href="javascript:ShowSlide(-1)">Previous Slide</a></td>
<td align="right"><a href="javascript:ShowSlide(1)">Next Slide</a></td>

I also tried this:

<td><a href="#" onClick="ShowSlide(-1)">Previous Slide</a></td>
<td align="right"><a href="#" onClick="ShowSlide(1)">Next Slide</a></td>

Where am I going wrong? I feel like an idiot right about now, but I've never played around with a script before. I'm in the beginning stages of (hopefully) learning.

Any help would be much appreciated.
Jimbo
01-31-2003, 08:16 PM
In the onClick that you made you had "java script:". You cannot have the space there. So the onClick should look like this:
onClick="javascript:ShowSlide(1)"

You don't even have to put "javascript:" in the onClick. You could just have it like this:
onClick="ShowSlide(1)"



<td><a href="#" name="Previous" onClick="ShowSlide(-1)">Previous</a></td>
<td align="right"><a href="#" name="Next" onClick="ShowSlide(1)">Next</a></td>


There ya go.:)
push
01-31-2003, 09:05 PM
Jimbo,

Thanks! However, I think I'm just cursed when it comes to java script because I'm still getting an error message. I know it's bad form to post the entire script, but I have no other clue of what to do.

<html>
<head>

<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('image3.gif','image2.gif','image3.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.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();
}
return true;
}
}

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

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

function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>

</head>
<body>

<form name="SlideShow">
<table>
<tr>
<td colspan=2><img name="Screen" width=270 height=297></td>
</tr>
<tr>
<td><a href="#" name="Previous" onClick="ShowSlide(-1)">Previous</a></td>
<td align="right"><a href="#" name="Next" onClick="ShowSlide(1)">Next</a></td>
</table>
</form>

<body onLoad="StartSlideShow()">

</body>
</html>
Jimbo
01-31-2003, 09:20 PM
Well, since you posted the whole script I see the problem. Some of the properties the script uses is ONLY for a form button like:
document.SlideShow.Previous.disabled = (NextSlide == 0);

The disabled property can only be used with form buttons.


Sorry...If ya want I can edit the script so it can work with text links too if you want.
Jimbo
01-31-2003, 09:39 PM
Here is the script to use with the text links:

<script language="text/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('image.gif','image1.gif','image2.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;
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();
}
return true;
}
}

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

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

function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>
beetle
01-31-2003, 09:48 PM
I've got a slideshow with a bunch of different navigation choices. It's a bit unpolished at the moment, though, but everything that is there works. (except the missing images on the demo page, I gotta re-upload those)

www.peterbailey.net/site/dev/
push
01-31-2003, 09:58 PM
Still not working....ugh! How frustrating. Here it is again, if you feel like looking, but you've spent a lot of time on this already! beetle, i will check out your script - thanks!

i wonder if it'd be easier to do an image instead of text?

<html>
<head>

<script language="text/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('image.gif','image1.gif','image2.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;
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();
}
return true;
}
}

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

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

function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>

</head>
<body>

<form name="SlideShow">
<table>
<tr>
<td colspan=2><img name="Screen" width=270 height=297></td>
</tr>
<tr>
<td><a href="#" name="Previous" onClick="ShowSlide(-1)">Previous</a></td>
<td align="right"><a href="#" name="Next" onClick="ShowSlide(1)">Next</a></td>
</table>
</form>

<body onLoad="StartSlideShow()">

</body>
</html>
Jimbo
01-31-2003, 10:00 PM
well. i don't know then cuz i tried the script i edited with some of my pics and it worked so...i dunno.
Sorry.
push
01-31-2003, 10:44 PM
How confusing - it works fine in IE 5.1 for mac, but doesn't work in IE 6.0 or Netscape 6.0 on my PC. Sigh! Thanks again for all your help, Jimbo.
push
01-31-2003, 11:07 PM
Just in case anyone else ever has this problem or needs a really easy any newbie like me could do it script. Thanks again to everyone for all their help!

http://www.j-scripts.com/scripts/script026.phtml

<script language="JavaScript">
<!-- go to j-scripts.com
var myPix = new Array("img1.gif","img2.gif","img3.gif")
var thisPic = 0

function doPrevious() {
if (document.images && thisPic > 0) {
thisPic--
document.myPicture.src=myPix[thisPic]
}
else {
thisPic = 2
document.myPicture.src=myPix[thisPic]
}
}
function doNext() {
if (document.images && thisPic < 2) {
thisPic++
document.myPicture.src=myPix[thisPic]
}
else {
thisPic = 0
document.myPicture.src=myPix[thisPic]
}
}
//-->
</script>
<img src="img1.gif" name="myPicture"><br>
<a href="javascript:doPrevious()">Previous</a> - <a href="javascript:doNext()">Next</a>