WebKnutselaarsHulpjes
CSS buttons Diashow 1 Diashow 2 Imagemap JS-Klokje Kleuren Laadtijd Meta-tags Mouseover Popups 1 Popups 2 Popups 3 Textures Reactie Home
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.
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>
<!--
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>
<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.
