Modify/find user-controlled slideshow script? Urgent

Here is a simple layer-free slide show script. I recommend keeping the canvas size the same for all pictures or else things will look strange as you move from picture to picture.

Fritz the Blank

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 3 secs)
current = 0;
function next()
{
if (document.slideform.slide[current+1])
     {
     document.images.show.src = document.slideform.slide[current+1].value;
     document.slideform.slide.selectedIndex = ++current;
   }
else first();
}

function previous()
{
if (current-1 >= 0)
     {
     document.images.show.src = document.slideform.slide[current-1].value;
     document.slideform.slide.selectedIndex = --current;
     }
else last();
}

function first()
{
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}

function last()
{
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}

function ap(text)
{
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}

function change()
{
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}

function rotate()
{
if (document.slideform.slidebutton.value == "Stop")
     {
     current = (current == document.slideform.slide.length-1) ? 0 : current+1;
     document.images.show.src = document.slideform.slide[current].value;
     document.slideform.slide.selectedIndex = current;
     window.setTimeout("rotate()", rotate_delay);
   }
}



<table cellspacing=1 cellpadding=4 bgcolor="#000000" border =0>
<tr>
 <td align=center bgcolor="white"> <b><font face="Arial, Helvetica, sans-serif">Portfolio Viewer</font></b> </td>
</tr>
<tr>
<td align=center bgcolor="white" width=250 height=300>
<img src="folder_inserts.jpg" name="show"></td>
</tr>
<tr>
<td align=center bgcolor="#CCCC66">
<select name="slide" onChange="change();">
<option value="folder_inserts.jpg" selected>Folder Inserts
<option value="brochure_one.jpg">Brochure One
<option value="brochure_two.jpg">Brochure Two
<option value="invite_one.jpg">Invite One
<option value="stationary.jpg">Logo Stationary
<option value="catalog.jpg">Catalog
<option value="poster.jpg">Poster
<option value="invite_two.jpg">Invite Two
<option value="stationary_two.jpg">Logo Stationary Two
<option value="brochure_four.jpg">Brochure Four
<option value="brochure_three.jpg">Brochure Three
<option value="cover_one.jpg">Cover One
<option value="ad.jpg">Ad
<option value="logo.jpg">Logo
<option value="invite_three.jpg">Invite Three
<option value="hangtag.jpg">HangTag
<option value="masthead.jpg">Masthead
<option value="package_design.jpg">Package Design
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#9966CC">
<input type=button onClick="previous();" value="<" title="Previous" id=button2 name=button2>
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">" title="Next" id=button3 name=button3>
</td>
</tr>
</table>

Thanks for the quick response, Fritz. Couple questions:

1. Not sure what this means:
   var rotate_delay = 5000; // delay in milliseconds (5000 = 3 secs)

Does that make the slideshow self-running/auto-play? Because I don't want that. As I said, I need a user-controlled slide show as shown in the URL I referenced. The first image just sits there, until the user clicks the Next button. Then that new image just sits there till the user clicks the Previous or the Next button.

2. In the HTML code you provided, what's with the "select name" and "option value="? Is that some sort of drop-down menu visible to the user? (which I don't want). Or is that something I need to include to get the slideshow script to work, something the user doesn't see... assuming I'll enter the names of the real jpgs instead of the ones you have there.

AM

The delay has to do if you want to run an automated show. The drop down allows the user to go directly to a particular slide. You can disable both of these if you like.

Fritz the Blank

nfroio,

I'll give that a shot.

A little confused about the <form>. Does there have to be a submit button or reset button?

If yes, how do I make my previous/next .gifs appear for the 2 "input type=button"?

If no, and I just insert my gifs, what should they link to? What should be their <a href>'s?

AM

fritz, thanks...

same "input type=button" question for your script as I asked nofrio...

and exactly what code/lines should I delete to disable autoplay and the dropdown.

IOW can you give me a clean script showing where I should customize it with my own jpgs and navigation gifs.

thx

AM

Nope, no submit needed, you can just save the file as anything.html, and save it into the same directory as your images. No A HREF needed, you could also use the path to your pics, but, I tend to find that just having them in the same directory is just fine.

The way I have mine setup is as follows:

See the result at: http://www.geocities.com/nfroio/slideshow222.html

Hopefully you can view GeoShities sites.. sigh.

<html>
<body>

<form>
<center>
<script type=text/javascript>
var current = 0;
var myPics = new Array();
function addPic(_p) {
 myPics[myPics.length?myPics.length:0] = new Image();
 myPics[myPics.length-1].src=_p;
}

addPic("87Wag1.jpg");
addPic("87Wag2.jpg");
addPic("87Wag3.jpg");
//and so on and so on for the remaining 9


function checkIt(val) {
 current = Math.abs((current+parseInt(val))%myPics.length);
 document.myimg.src = myPics[current].src;
}

</script>
<br><input type=button value="Previous" onclick="checkIt(-1)">
<script type=text/javascript>
document.write("<img name=myimg alt='' src='"+myPics[current].src+"'>");
</script>
<input type=button value="Next" onclick="checkIt(1)">
</center>
</form>


</body>
</html>

nfrio, got your geoshitty site up <g>, it works just how I want, except the previous/next need to appear below the picture instead of on either side. I assume that's simple to change.

I see your previous/next buttons look like buttons. Client wants fancy gifs instead. How do I do that?

I assume I can cut/paste your code from <form> to </form> into the <td> ... </td> where this will appear on the actual page and it'll work?

AM

Yes, you can move the previous / next buttons to the bottom, I have some some pressing work to do, but will re-work the code, and load here shortly.

Re: Cut & Paste, yes, it will work just fine.

For the buttons, you could make a cute button w/ a graphic program, and insert as an IMG SRC=cutebutton.gif.

I'll get back to you as soon as possible

Thanks,

nfroio

Sorry, work calls everyonce in awhile;

as for moving the buttons, replace the bottom section with this:

<script type=text/javascript>
document.write("<img name=myimg alt='' src='"+myPics[current].src+"'>");
</script>
<br><input type=button value="Previous" onclick="checkIt(-1)">
<input type=button value="Next" onclick="checkIt(1)">

Basically, just moved the document.write section (which places the pics on the screen, to the top, and the buttons to the bottom.

I will look into the Button thing, graphics are not really my forte...

nfroio

Hi hergeekness,

for the cute button, what I would suggest, unless you are good with graphic programs, is to search the web for premade button, and insert them like this:

</script>
<script type=text/javascript>
document.write("<img name=myimg alt='' src='"+myPics[current].src+"'>");
</script>
<br>
<IMG SRC="button_previous.jpg" onclick="checkIt(-1)">
<IMG SRC="button_next.jpg" onclick="checkIt(1)">

The onclick="checkIt(x)" will preform the actual action, and it sould work just fine.

nfroio

Here is a site w/ some cool looking buttons that you can grab and customize as needed.

http://www.coolarchive.com/buttons.cfm

nfroio,

thanks for the excellent help. I hear you about the work impinging once in awhile... gotta leave for an appt.  

Give me a day or so to test out the script and make sure it's what I need. It sounds like you've answered any questions I may have.

Assuming it works fine, I'll accept it as an answer. And thanks fritz for your help too.

AM

Thank you AM, let me know if you need anything else, I think that you'll love the coolarchive button site, its a great tool for making super cool, and endlessly customizable buttons.........

thanks! works great.

Glad that I could help AM, thank you for the 'A' grade... you're question has also inspired me to update my WAY out of date website... so, thanks for that as well...

nfroio