Modify/find user-controlled slideshow script? Urgent

One of my clients wants me to add a  user-controlled slide show to his site. He's sent me an example of something close to what he wants, see the Photo Gallery on this page:
<http://www.revvinwithford.com/photo_gallery2.htm>

He likes that except he doesn't want the slideshow's "home" button, and he doesn't want the surrounding pictureframe artwork.

I'm not a javascripter (new Dreamweaver user), but I can sort of make a guess as to what's happening when I look at the code. It appears this is a handwritten script that cycles 40 images and adds a ".jpg" extension to them for some reason. (If I'm way off base feel free to roll your eyes...)

This client only has about 12 pix and they all have the .jpg extension already added to them.

Can anyone tell me how I can either a) modify this page's javascript code in DW 4's script editor so the "next" and "previous" gif buttons I'll create will call the 12 images correctly; or b) point me to a javascript that already does this?

Note that I really don't want to use layers here if I can help it...trying to keep the site very accessible. The slideshow will appear in a table cell (probably in a simple table within it). Needs to work with v4+ browsers, Mac/Windows.

Also, do the images need to be the same size? (as they do for rollovers?)

Though I suspect this is a simple javascript question, I'm offering extra points for clear, step-by-step detailed instrux, really quick, as I'm under a tight deadline.

AM
P.S. let me know if it'd be easier I cut/pasted the javascript here. I'm not sure which sections are pertinent so I thought it best just to point to the URL.

 
LVL 4
hergeeknessAsked:
Who is Participating?
 
nfroioConnect With a Mentor Commented:
Hello hergeekness,

give this code a run, and see what you think:

<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("yourpic1.jpg");
addPic("yourpic2.jpg");
addPic("yourpic3.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>
 
 

0
 
fritz_the_blankCommented:
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>
0
 
hergeeknessAuthor Commented:
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
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
fritz_the_blankCommented:
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
0
 
hergeeknessAuthor Commented:
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
0
 
hergeeknessAuthor Commented:
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
0
 
nfroioCommented:
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>




0
 
hergeeknessAuthor Commented:
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
0
 
nfroioCommented:
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
0
 
nfroioCommented:
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
0
 
nfroioCommented:
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

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

http://www.coolarchive.com/buttons.cfm
0
 
hergeeknessAuthor Commented:
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
0
 
nfroioCommented:
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.........

0
 
hergeeknessAuthor Commented:
thanks! works great.
0
 
nfroioCommented:
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
0
All Courses

From novice to tech pro — start learning today.