Slideshow på hjemmesiden med Javascript

Her er et script kodet i javascript der kan vise slideshow på din hjemmeside. Du vælger selv hvilke billeder der skal vises, og der kan i teorien være et ubegrænset antal af billeder i slideshowet.
Jeg har i øvrigt oprettet et link til et lignende script, liggende på alle mine billed-sider...

Brugeren af slideshowet kan benytte sig af forskellige features:

Ændre hastigheden mellem billederne

Navigere mellem billederne (Frem og tilbage)

Sætte slideshowet på pause, hvis man vil se nærmere på et billede

Start med at oprette en mappe på dit websted, og placér billederne til dit slideshow i mappen.
Billederne skal hedde 1.jpg, 2.jpg, 3.jpg osv...

Her er koden til hele slideshowet. Opret en fil med koden og gem den på dit websted. Filen skal indeholde følgende kode, og IKKE andet...
(Download evt. filen her:

og vælg "Gem").

HUSK: At ændre adressen til mappen, hvor billederne er gemt (Billederne skal hedde 1.jpg, 2.jpg, 3.jpg osv...)
HUSK: At ændre teksten til billederne (Du kan tilføje flere tekstfelter, afhængig af antallet af billeder: SLIDE_text[6], SLIDE_text[7]...)

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

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

var SLIDE_sti = 'http://www.peters1.dk/billeder/galleri/sjov/'; // Adresse til mappen, hvor billederne er placeret

var SLIDE_text = new Array();
SLIDE_text[1]  = 'Kalkun og baby'; // Tekst til Billede 1
SLIDE_text[2]  = 'Surprise-ballon'; // Tekst til Billede 2
SLIDE_text[3]  = 'Strand'; // Tekst til Billede 3
SLIDE_text[4]  = 'Utro ægtemand'; // Tekst til Billede 4
SLIDE_text[5]  = 'Det værste job'; // Tekst til Billede 5

// Ingen ændringer herunder...

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

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

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

function SLIDE_play()
{
  document.getElementById('SLIDE_play').disabled = true;
  document.getElementById('SLIDE_pause').disabled = false;
  SLIDE_aktuel++;
  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_tilbage()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_aktuel--;
  SLIDE_slide();
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}

function SLIDE_frem()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_aktuel++;
  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_aktuel > (SLIDE_antal)) SLIDE_aktuel=1;
  if (SLIDE_aktuel < 1) SLIDE_aktuel = SLIDE_antal;
  if (document.all)
  {
    document.getElementById("SLIDE_textBox").style.background = "transparent";
    document.images.SLIDE_billedeBox.style.filter="blendTrans(duration=2)";
    document.images.SLIDE_billedeBox.style.filter="blendTrans(duration=SLIDE_fade)";
    document.images.SLIDE_billedeBox.filters.blendTrans.Apply();
  }
  document.images.SLIDE_billedeBox.src = SLIDE_load[SLIDE_aktuel].src;
  if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= SLIDE_text[SLIDE_aktuel];
  if (document.all) document.images.SLIDE_billedeBox.filters.blendTrans.Play();
}

function SLIDE_hastighed(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}
.knap {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_billedeBox" 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_hastighed" class="input" onChange="SLIDE_hastighed(this)">
    <option value="1000">1 sekund</option>
    <option value="2000">2 sekunder</option>
    <option value="3000" selected>3 sekunder</option>
    <option value="5000">5 sekunder</option>
    <option value="8000">8 sekunder</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  </td>
  <td>
  <button type="button" id="SLIDE_tilbage" class="knap" onClick="SLIDE_tilbage()">&nbsp;<<&nbsp;</button>&nbsp;
  <button type="button" id="SLIDE_play" class="knap" onClick="SLIDE_play()">Play</button>&nbsp;
  <button type="button" id="SLIDE_pause" class="knap" onClick="SLIDE_pause()">Pause</button>&nbsp;
  <button type="button" id="SLIDE_frem" class="knap" onClick="SLIDE_frem()">&nbsp;>>&nbsp;</button>
  </td>
  <td>
  &nbsp;&nbsp;&nbsp;
  <BUTTON type="button" onClick="top.window.close();" class="knap">Luk vindue</BUTTON>
  </td>
</tr>
</table>
</div>
</body>
</html>

Nu skal du bare oprette et link til ovenstående fil (slideshowet)... Eksempel:
HUSK: At ændre adressen til stedet på dit websted, hvor slideshowet er placeret