WebKnutselaarsHulpjes Webknutselaarshulpjes logo

WebKnutselaarsHulpjes

Zo blij  

Diashow van foto's of andere afbeeldingen.

13 november 2008

Een serie afbeeldingen in de pagina laten zien, handmatig door te bladeren of automagisch te laten lopen als diashow.

Met bladerfunctie (vorige/volgende) of door op 'Start/Stop' te klikken om de voorstelling te starten, door nogmaals op 'Start/Stop' te klikken stopt de voorstelling.

Alle afbeeldingen worden geladen bij het opvragen van de pagina.

Vorigr Start/Stop Volgende

Zet dit (groene) stukje in het <head> gedeelte van de pagina.

<script language="javascript" type="text/javascript">
<!--
nwPlaatje = new Array (
// Hier zet je de afbeeldingen, bij de laatste de komma op het einde weglaten
"img/afbeelding01.jpg",
"img/afbeelding02.jpg",
"img/afbeelding03.jpg",
"img/afbeelding04.jpg"
);
var mijnPlaatjes = plaatjesLaden (nwPlaatje);
function plaatjesLaden(ditPlaatje) {
var afbeeldingen = new Array;
for (var plaatjeNr=0; plaatjeNr<ditPlaatje.length; plaatjeNr++) {
afbeeldingen[plaatjeNr] = new Image();
afbeeldingen[plaatjeNr].src = (ditPlaatje[plaatjeNr]);
}
return(afbeeldingen);
}
var nrPlaatje = 0;
var watPlaatje = nwPlaatje.length - 1;

//Vertraging tussen plaatjes in milliseconden
var verTraging = 3000;

var opSlot = false;
var doeHet;
function anderPlaatje(richting) {
if (document.images) {
nrPlaatje = nrPlaatje + richting;
if (nrPlaatje > watPlaatje) {
nrPlaatje = 0;
}
if (nrPlaatje < 0) {
nrPlaatje = watPlaatje;
}
plaatje='<img src="'+nwPlaatje[nrPlaatje]+'">';
document.getElementById('diashow').innerHTML=plaatje;
}
}
function autoMagisch() {
if (opSlot == true) {
opSlot = false;
window.clearInterval(doeHet);
}
else if (opSlot == false) {
opSlot = true;
doeHet = setInterval("anderPlaatje(1)", verTraging);
}
}
// -->
</script>

Zet dit (groene) stukje in het <body> gedeelte van de pagina op de plaats waar je de diavoorstelling wilt hebben.

<div id="diashow"><img src="img/afbeelding01.jpg" alt="" width="150" height="150" border="0"></div>

<div style="cursor:pointer;">
<span onClick="anderPlaatje(-1)">< Vorige</span>
<span onClick="autoMagisch()">Start/Stop</span>
<span onClick="anderPlaatje(1)">Volgende ></span>
</div>

img/afbeelding01.jpg is het plaatje dat meteen in de pagina wordt geladen, width en height aanpassen of weglaten.

De bediening kan zowel boven als onder de afbeelding worden geplaatst.

 

Divider

WebKnutselaarsHulpjesDisclaimer: de auteur van WebKnutselaarsHulpjes zal geen enkele aansprakelijkheid aanvaarden voor schadelijke gevolgen, lichamelijke klachten, slapeloze nachten, of enig ander gevolg van het gebruik van de hier getoonde voorbeelden.