Du er her: WebStudie Websmeden JavaScripts Slideshow Retur til start

JavaScripts - Slideshow

Et "lysbillede show", som giver dig mulighed for at bladre frem og tilbage mellem en stribe grafik-elementer eller at få listet alle grafik-elementer på én side.

Billedesekvensen kræver, at dit websted er opbygget som et frameset (rammer), der i sin mest simple form kunne se således ud:

MENU-RAMMEN
Denne ramme styrer sekvensen og kan være navngivet NAME="menu".		 BILLEDE-RAMMEN
Denne ramme er hovedrammen (NAME="main") og i eksemplet er det her billederne vises.

Se et eksempel på et slideshow. Eksemplet giver dig mulighed for at bladre mellem nogle dejlige danske sommer piger, som alle har været vist i "Se & Hør".

I HEAD-sektionen - af det HTML-dokument som vises i MENU-RAMMEN - placeres scriptet som ses nedenfor:

<SCRIPT LANGUAGE="JavaScript">
<!-- skjuler scriptet for gamle browsere

antal=10; spd=30000;
var timerID;
startnyGrafik=1;
nyGrafik=new Array(antal);
for (i=0; i<(antal+1); i++) {
    nyGrafik[i]=i;
    }
          nyGrafik[ 1]="01.html";
          nyGrafik[ 2]="02.html";
          nyGrafik[ 3]="03.html";
          nyGrafik[ 4]="04.html";
          nyGrafik[ 5]="05.html";
          nyGrafik[ 6]="06.html";
          nyGrafik[ 7]="07.html";
          nyGrafik[ 8]="08.html";
          nyGrafik[ 9]="09.html";
          nyGrafik[ 10]="10.html";
 function flytGrafik() {
  document.billedesekvens.grafikNummer.value=startnyGrafik+" af "+antal;
  parent.main.location.href=nyGrafik[startnyGrafik];
}
function fremKlik() {
  if (startnyGrafik<antal) {
    startnyGrafik=startnyGrafik+1;
    flytGrafik();
    }
  else {
    alert('Du er fremme ved det sidste billede!');
  }
}
function tilbageKlik() {
  if (startnyGrafik>1) {
    startnyGrafik=startnyGrafik-1;
    flytGrafik();
    }
  else {
    alert('Du er fremme ved starten af billede sekvensen!');
  }
}
function startKlik() {
  if (startnyGrafik!=1) {
    startnyGrafik=startnyGrafik=1;
    flytGrafik();
    }
  else {
    alert('Du er alleOrangee ved starten af billede sekvensen!');
  }
}
function slutKlik() {
  if (startnyGrafik!=10) {
    startnyGrafik=startnyGrafik=10;
    flytGrafik();
    }
  else {
    alert('Du er alleOrangee ved det sidste billede af sekvensen!');
  }
}
function lukVindue () {
  window.parent.window.close ();
}
function forladSekvens(x) {
  parent.location.href=x;
}
function startSekvens () {
  document.billedesekvens.grafikNummer.value=startnyGrafik+" af "+antal;
}
function visAlle () {
  document.billedesekvens.grafikNummer.value=" Alle ";
  parent.main.location.href=('alle.html');
}

//-->
</SCRIPT>
Beskrivelse:
  • 10 repræsenterer det totale antal grafik-elementer, som er med i sekvensen.
  • Hvert grafik-element vises på sin egen html-side som i eksemplet defineres med nyGrafik[ 1]="01.html"; til nyGrafik[ 10]="10.html";. Værdien i [ ] er en forløbende nummerering af de enkelte grafik-elementer, som efterfølges af stien til den html-side, hvor grafikken/billedet vises.
  • Ved opbygning af et frameset er det god kutyme at navngive hovedrammen main. I scriptet henviser main til, at hver gang der foretages et valg, så skal resultatet af valget (her en html-fil indeholdende et billede) vises i den ramme, som hedder main.
  • Scriptet viser hvilket billede du er nået til, f.eks. "Billede 3 af 10". Værdien vises i formularen med navnet billedesekvens.
  • alle.html er en html-side, hvor alle grafik-elementerne er samlet i en lang række.

Nedenfor vises den kode, som skal placeres i BODY-sektionen i det samme HTML-dokument. I selve BODY-tag'en kaldes scriptet med en onload funktion <BODY ONLOAD="startSekvens()">

<FORM NAME="billedesekvens">
<TABLE WIDTH="100%" BORDER="0"><TR><TD>
<B>Billede:</B> <INPUT TYPE="text" NAME="grafikNummer" SIZE="8" VALUE="">
</TD></TR><TR><TD ALIGN="center">
<INPUT TYPE="button" NAME="foerste" VALUE="|<-" ONCLICK="startKlik()">
<INPUT TYPE="button" NAME="forrige" VALUE="<<" ONCLICK="tilbageKlik()">
<INPUT TYPE="button" NAME="naeste" VALUE=">>" ONCLICK="fremKlik()">
<INPUT TYPE="button" NAME="sidste" VALUE="->|" ONCLICK="slutKlik()">
</TD></TR><TR><TD>
<HR>
</TD></TR><TR><TD ALIGN="center">
<INPUT TYPE="button" NAME="alle" VALUE="Vis alle" ONCLICK="visAlle()">
<INPUT TYPE="button" NAME="exit" VALUE="Exit" ONCLICK="forladSekvens('farvel.html')">
</TD></TR></TABLE>
</FORM>
Beskrivelser:
  • "8" angiver hvor mange karakterer, som maksimalt kan vises i det felt, hvor billedenumrene vises.
  • "|<-", "<<", ">>", "->|", "Vis alle" og "Exit" viser den tekst, som kommer til at stå på de knapper, som brugeren anvender til navigere rundt i billede sekvensen.
  • Koden ONCLICK="forladSekvens('farvel.html')" definerer, at brugeren rammer html-siden "farvel.html", når der klikkes på "Exit"-knappen. Du kan alternativt benytte koden ONCLICK="lukVindue()", som vil lukke browser-vinduet ved klik på "Exit"-knappen.
  • billedesekvens er navnet på den formular hvor navigations-knapperne og tekst-feltet vises.

[ start ]   [ indhold ]   [ e-mail ]