View Full Version : How to add function buttons to existing js slideshow?

02-05-2007, 06:39 AM
Hi guys,
I have a slideshow script from codelifter, and I would like to add function buttons. I would like, play/pause, previous, next, first and last.
here is the script:

var SlideShowSpeed = 4000;
var CrossFadeDuration = 3;
var Picture = new Array();
var Caption = new Array();

Picture[1] = 'index_slideshow_pics/great_white_dark.jpg';
Picture[2] = 'index_slideshow_pics/great_white.jpg';
Picture[3] = 'index_slideshow_pics/pella.jpg';
Picture[4] = 'index_slideshow_pics/pella_rear.jpg';
Picture[5] = 'index_slideshow_pics/pella_wake.jpg';
Picture[6] = 'index_slideshow_pics/5_gummys_on_deck.jpg';
Picture[7] = 'index_slideshow_pics/dan_holding_gummy.jpg';
Picture[8] = 'index_slideshow_pics/ollie_holding_gummy.jpg';
Picture[9] = 'index_slideshow_pics/greg_bronzie.jpg';
Picture[10] = 'index_slideshow_pics/pink_snapper.jpg';

Caption[1] = "The Great White Shark.";
Caption[2] = "Also known as a White Pointer.";
Caption[3] = "Shawns boat Pella.";
Caption[4] = "Pella moored at Emu Bay.";
Caption[5] = "Cruising out To sea in Pella.";
Caption[6] = "A few Gummy sharks on deck.";
Caption[7] = "Dan Holding a Gummy shark.";
Caption[8] = "Ollie Holding another Gummy shark.";
Caption[9] = "Bullfrog with a 70 kilo Bronze Whaler Shark.";
Caption[10] = "A small Pink Snapper.";

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;
var preLoad = new Array();

for (iss = 1; iss < pss+1; iss++)
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];

function runSlideShow()
if (document.all){
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);

I was hoping someone could show me the script needed to make these buttons function from the already existing js script. The script is in an external .js file
I think I can write the html script in the body ( thats how noobie I am, I hope i can write the html, lol).
I have only just recently experimented with HTML, XHTML, CSS and JS, at W3schools, LOL.
I was hoping that once I see the correct code in front of me I may grasp JS a little bit better.
Thanks in advance to anyone who would like to contribute some ideas.

I apologise if this is the incorrect way to post a script or if its too long, so feel free to let me know :-)

02-05-2007, 07:35 AM

there's more slideshows on that site. It's a bit outdated but those guys were so so good a few years back they're still pretty useful scripts

02-05-2007, 07:36 AM
By the way, that script above is a very nice job for a "rookie". Kudos!

02-05-2007, 08:24 AM
Hi FJbrian, thanks for responding :-)
No "kudos" for me I am just a noob that got the script from codelifter and just changed some of the variables, :-( lol

I wanted to add some buttons, play/pause, previous, next, first and last.
Is it possible to show me the code needed to do this?
I can create the buttons in HTML in the body, but I'm clueless as to how the script is written to enable them to work
I assume you add the 5 functions,

function next() {

function previous() {

function first() {

function last() {

function play() {

Could you tell me what needs to go in the brackets to make it work with the above script? (and anything else Ive probably missed).
I could just get another slideshow that has it all, but was hoping that if someone showed me the extra script to add to this existing one. that something may click for me, and I may actually learn something. LOL
thanks for your time and input already mate

02-07-2007, 08:58 PM
sorry for the late reply.

I'm guessing here but just think it thru.
You've got an array of images image[1] image [2] etc.
I think your counting variable is jss. So for next add one to jss and for previous minus 1 for jss.

first and last, is just image[1](or 0) and image[9]

to stop and play "stop time" or "start time"(timeout)

02-09-2007, 05:10 AM
Thank you mate for taking the time out to reply :-)
That makes perfect sense, lol.
I guess I was just getting overwhelmed with the whole learning javascript issue. and couldnt see the forest for the trees, lol
I will have a play around with it and see if I can suss it out.
I wanted to say cheers, to you and all the guys who volunteer their time and knowledge, to give noobs a push in the right direction.
no worries mate thank you.

02-09-2007, 01:58 PM
Thanks again mate, I have played around and successfully got 4 of my functions to work, hooah, lol. (its only taken me around 3 hours lol)

Below is what works for 4 of the functions, please let me know if this is ok, or if there is a better way.

function first()
document.images.PictureBox.src = Picture[0];
Picture.selectedIndex = 0;

function last()
document.images.PictureBox.src = Picture[pss];
Picture.selectedIndex = pss;

function next()
if(Picture[jss + 1])
document.images.PictureBox.src = Picture[jss + 1];
Picture.selectedIndex = ++jss;
else first();

function previous()
if(jss - 1 >= 0)
document.images.PictureBox.src = Picture[jss - 1];
Picture.selectedIndex = --jss;
else last();

function play/stop()

omg, I worked how to use the code tags, lol.

but I still have trouble trying to work out my play/stop function, if anyone could help with the code to make it work that would be great.
I was hoping that when clicked it also changed the text on the button from play to stop.
I know this must sound so noobish to you guys, but having never written any code of any sort before this week. Just getting those 4 functions to work, gave me a hard-on, LOLOL.
So again any suggestions greatly appreciated.

02-09-2007, 06:10 PM
I think I'm understanding your variable usage, something like this:
SlideShowSpeed=0;(no time if zero)
tss = setTimeout('runSlideShow()', SlideShowSpeed);

SlideShowSpeed=4000;(start time again)
tss = setTimeout('runSlideShow()', SlideShowSpeed);

02-09-2007, 06:12 PM
I don't see a button in the code but I had a long night and am overtired.
document.formname.button.value=start or stop