Slideshow on homepage with Javascript

Here is a script coded in javascript to show slideshow on your homepage. All you have to do is choose which pictures and text to show in your show, and how many...
On my gallery pages i have included a similar javascript slideshow.

The guest on your homepage has the following opportunities to control the slideshow::

Change the speed between the pictures

Navigating through the pictures (Forward and Back)

Pause the slideshow, if he/she wants to take a closer look on a particular picture.

Start by Create a Folder on your webpage, and place the slideshow-pictures in the Folder.
Name the pictures 1.jpg, 2.jpg, 3.jpg etc...

Here is the code to the whole slideshow-file. Create a file with the code, and save it on your website. The file schould have the following content:
(You can download the file here:

and choose "Save").

REMEMBER: To change the path to the folder (directory), where the images are saved (The images shall be named 1.jpg, 2.jpg, 3.jpg etc...)
REMEMBER: To change the text to the pictures (You can add several textfields, depending on the numbers of pictures in the slideshow: SLIDE_text[6], SLIDE_text[7]...)

<html>
<head>
<title>Slideshow</title>
<script>

////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////

var SLIDE_path = 'http://www.peters1.dk/billeder/galleri/sjov/'; // Path to the folder, where the images are put.

var SLIDE_text = new Array();
SLIDE_text[1]  = 'Everythings fine! The turkey is in the microwawe, and Im feeding baby Fritz'; // Text to Image 1
SLIDE_text[2]  = 'I would like a surprise-balloon...'; // Text to Image 2
SLIDE_text[3]  = 'Nudist-Beach'; // Text to Image 3
SLIDE_text[4]  = 'Honey, I have a confession... I have another woman'; // Text to Image 4
SLIDE_text[5]  = 'The worst job'; // Text to Image 5

// Don't change anything under here...

var SLIDE_pic = new Array();
var SLIDE_load = new Array();
var SLIDE_status, SLIDE_timeout;
var SLIDE_actual = 1;
var SLIDE_speed = 3000;
var SLIDE_fade = 2;

for (i = 1; i <= SLIDE_text.length-1; i++)
{
  SLIDE_pic[i] = SLIDE_path+i+'.jpg';
  SLIDE_load[i] = new Image();
  SLIDE_load[i].src = SLIDE_pic[i];
}
var SLIDE_count = SLIDE_pic.length-1;

function SLIDE_start()
{
  document.getElementById('SLIDE_pause').disabled = true;
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  document.getElementById("SLIDE_textBox").innerHTML= SLIDE_text[SLIDE_actual];
}

function SLIDE_play()
{
  document.getElementById('SLIDE_play').disabled = true;
  document.getElementById('SLIDE_pause').disabled = false;
  SLIDE_actual++;
  SLIDE_slide();
  SLIDE_status = 'SLIDE_play';
  SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}

function SLIDE_pause()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_status = 'SLIDE_pause';
  document.getElementById('SLIDE_pause').disabled = true;
  document.getElementById('SLIDE_play').disabled = false;	
}

function SLIDE_back()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual--;
  SLIDE_slide();
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}

function SLIDE_forward()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual++;
  SLIDE_slide()
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}


function SLIDE_slide()
{
  if (SLIDE_status != 'SLIDE_pause')
  {
    document.getElementById('SLIDE_play').disabled = true;
    document.getElementById('SLIDE_pause').disabled = false;
  }
  if (SLIDE_actual > (SLIDE_count)) SLIDE_actual=1;
  if (SLIDE_actual < 1) SLIDE_actual = SLIDE_count;
  if (document.all)
  {
    document.getElementById("SLIDE_textBox").style.background = "transparent";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=2)";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=SLIDE_fade)";
    document.images.SLIDE_picBox.filters.blendTrans.Apply();
  }
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= SLIDE_text[SLIDE_actual];
  if (document.all) document.images.SLIDE_picBox.filters.blendTrans.Play();
}

function SLIDE_speeds(SLIDE_valgt)
{
  SLIDE_speed = SLIDE_valgt.options[SLIDE_valgt.selectedIndex].value;
}
</script>
<style>
body {margin: 8px 8px 8px 0px}
td {font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;	font-size: 11px}
.button {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size: 11px}
.input {font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 11px}
</style>
</head>

<body onLoad="SLIDE_start()">
<center><img name="SLIDE_picBox" style="border: thin inset white"></center>
<div id="navigation" align="center" style="width:100%;position:absolute;bottom:15px;">
<table>
<tr>
  <td id="SLIDE_textBox" align="center">&nbsp;</td>
</tr>
</table>
<br />
<table>
<tr valign="middle">
  <td>
  <select name="SLIDE_speeds" class="input" onChange="SLIDE_speeds(this)">
    <option value="1000">1 second</option>
    <option value="2000">2 seconds</option>
    <option value="3000" selected>3 seconds</option>
    <option value="5000">5 seconds</option>
    <option value="8000">8 seconds</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  </td>
  <td>
  <button type="button" id="SLIDE_back" class="button" onClick="SLIDE_back()">&nbsp;<<&nbsp;</button>&nbsp;
  <button type="button" id="SLIDE_play" class="button" onClick="SLIDE_play()">Play</button>&nbsp;
  <button type="button" id="SLIDE_pause" class="button" onClick="SLIDE_pause()">Pause</button>&nbsp;
  <button type="button" id="SLIDE_forward" class="button" onClick="SLIDE_forward()">&nbsp;>>&nbsp;</button>
  </td>
  <td>
  &nbsp;&nbsp;&nbsp;
  <BUTTON type="button" onClick="top.window.close();" class="button">Close window</BUTTON>
  </td>
</tr>
</table>
</div>
</body>
</html>

Now you only have to insert a link to the slideshow-file... Example:
REMEMBER: To change the URL to the path on your webpage where the slideshow has been uploaded