Solved

Modify/find user-controlled slideshow script? Urgent

Posted on 2002-05-15
16
253 Views
Last Modified: 2012-06-21
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.

 
0
Comment
Question by:hergeekness
  • 8
  • 6
  • 2
16 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7011479
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
 
LVL 4

Author Comment

by:hergeekness
ID: 7011561
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
 
LVL 5

Accepted Solution

by:
nfroio earned 350 total points
ID: 7011591
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7011617
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
 
LVL 4

Author Comment

by:hergeekness
ID: 7011650
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
 
LVL 4

Author Comment

by:hergeekness
ID: 7011657
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
 
LVL 5

Expert Comment

by:nfroio
ID: 7011665
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
 
LVL 4

Author Comment

by:hergeekness
ID: 7011736
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 5

Expert Comment

by:nfroio
ID: 7011778
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
 
LVL 5

Expert Comment

by:nfroio
ID: 7011798
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
 
LVL 5

Expert Comment

by:nfroio
ID: 7011860
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
 
LVL 5

Expert Comment

by:nfroio
ID: 7011874
Here is a site w/ some cool looking buttons that you can grab and customize as needed.

http://www.coolarchive.com/buttons.cfm
0
 
LVL 4

Author Comment

by:hergeekness
ID: 7011890
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
 
LVL 5

Expert Comment

by:nfroio
ID: 7011905
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
 
LVL 4

Author Comment

by:hergeekness
ID: 7021542
thanks! works great.
0
 
LVL 5

Expert Comment

by:nfroio
ID: 7021818
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now