Hoi rv94,
Eerst even checken wat de bedoeling precies is:
- Er is een pagina waarop een image-carrousel staat, waarbij de volgorde van de images random moet zijn.
- Op andere pagina's staat hetzelfde carrousel, en dan moet opnieuw een random volgorde worden bepaald.
- Bij herladen of terugkomen op een eerdere pagina wordt ook de random opnieuw bepaald.
- Nadat alle images (in de random volgorde) door het carrousel zijn, moet het carrousel blijven herhalen.
- Zolang de pagina openstaat, moet de volgorde van de herhaling gelijk zijn aan de random volgorde van de eerste ronde, zodat alle images eerlijk evenveel aan de beurt komen en op gelijke afstand van elkaar zitten (= er mag niet voor de tweede e.v. ronde opnieuw gerandomd worden).
Als dit klopt, dan hoeft er niet ingewikkeld heen en weer gerangeerd te worden tussen javascripts en een php-bestand, maar kan alles met één javascriptje geregeld worden, dat op elke pagina aangeroepen wordt.
HTML:
<body>
<div id="wisselaar"><img src="images/kasteel.jpg" alt=""></div>
<!--
... (rest van de pagina)
-->
<script type="text/javascript" src="scripts/random-carrousel.js"></script>
</body>
</html>
Voor als javascript uit mocht staan, is er een standaard-img in de html opgenomen. Als javascript draait, komt daar het carrousel voor in de plaats.
In het script kunnen dan twee functies komen:
- Een functie voor het random toewijzen van een volgorde aan de images (dan is daarvoor geen php-bestand nodig).
- Een functie voor het carrousel, met gebruikmaking van de bepaalde volgorde.
Volgorde bepalen
Je geeft de map op, waar de images uit gehaald moeten worden.
Je maakt een rijtje van de bestandsnamen van de betreffende images.
[JS]var wisselMap="images/"; // in te vullen image-directory
var wisselImg=new Array();
// het in te vullen lijstje van te gebruiken images:
wisselImg[0]="ochtendalpen.jpg";
wisselImg[1]="eigenpotje.jpg";
wisselImg[2]="alpenkamp.jpg";
wisselImg[3]="arend.jpg";
wisselImg[4]="steenbok2.jpg";
wisselImg[5]="zee.jpg";
wisselImg[6]="kasteel.jpg";[/JS]
Daarmee kan het script aan de slag:
- Het aantal images wordt bepaald.
- Er wordt een verzameling aangelegd van de randoms die op een bepaald moment al getrokken zijn (in het begin dus niks).
- Het aantal al random getrokken images wordt bijgehouden.
- Er wordt een verzameling aangelegd van de bestandsnamen voor de random volgorde.
[JS]var aantalImg=wisselImg.length;
var geweest=new Array();
for (var i=0; i<aantalImg; i++){ // geen img-nr is nog geweest
geweest
="nee";
}
var volgnummer=0;
var toonImg=new Array(); // dit gaat de random volgorde worden[/JS]
Nu kan het random functie gemaakt worden:
- Voorwaarde is dat nog niet alle random-nummers geweest zijn, want dan hoeft er niets meer getrokken te worden.
- Er wordt eerst een random getal getrokken tussen de 0 en 1 minder dan het aantal images (had ook 1 en het aantal kunnen zijn, maar de 0 is handig omdat daarmee de script-nummering altijd begint).
- Als het random-getal nog niet eerder getrokken was, dan wordt via het random-getal de bestandsnaam van het image gekoppeld aan de volgorde-verzameling.
- Als het random-getal wel eerder getrokken was, dan mag het niet gebruikt worden: dan moet een verse poging gedaan worden om een nog niet getrokken random te plukken.
- Als alle randoms getrokken zijn, zitten alle bestandsnamen in de verzameling met de willekeurige volgorde.
- En dan mag het carrousel in werking gaan.
[JS]function goRandom(){
if (volgnummer<aantalImg){ // als nog niet alle images aan de beurt zijn geweest
var random = Math.floor(Math.random()*aantalImg); // output-waarden: 0, 1, 2, ... (t/m aantalImg - 1)
if (geweest[random]=="nee"){ // als random-getal niet eerder getrokken was
toonImg[volgnummer]=wisselImg[random]; // img-volgnummer krijgt random img toegewezen
geweest[random]="ja"; // deze mag niet nog eens getrokken worden
volgnummer=volgnummer+1; // er is er weer eentje afgehandeld
goRandom(); // volgende random gaan trekken voor volgend volgnummer
}
else { // als een nummer al getrokken was, nogmaals nieuwe trekken
goRandom();
}
}
else { // alle nummers zijn geweest, volgorde staat vast
showCarrousel();
}
}[/JS]
Carrousel laten draaien
Voor deze functie is het handig om een setting te maken voor de pauze in seconden:
[JS]var timer=2.5; // in te vullen wissel-tempo in seconden[/JS]
Daarna gaat alles vanzelf:
[JS]var nr=0;
function showCarrousel(){
if (nr==aantalImg){ // als alles geweest is, herhalen in dezelfde volgorde
nr=0;
}
document.getElementById('wisselaar').innerHTML='<img src="'+wisselMap+toonImg[nr]+'" alt="" />';
nr=nr+1;
setTimeout(showCarrousel,timer*1000); // nu in msec
}[/JS]
Tot slot moet de random-functie gaan werken zodra de pagina geopend wordt. Omdat het script helemaal onderaan in de <body> zit, en alles dan al ingeladen is, kan dat "koud" op het eind van het script gezet worden:
[JS]goRandom();[/JS]
En voor het gemak staan de maten van de images in de #wisselaar in de css, dan hoeft dat er niet elke keer via het javascript in gezet te worden:
Code:
#wisselaar img {
width: ..px;
height: ..px;
}
=======
Al met al wordt het dan een javascriptje van nog geen 2kB;
Test: 2 pagina's met hetzelfde script:
En vervolgens kan je het zo mooi gaan maken als je zelf wilt:
- Een css-preload maken voor de images om geen flitsen te krijgen bij de eerste keer.
- Met javascript een infader toevoegen voor geleidelijke overgang.
- Via de css de toegankelijkheid waarborgen als javascript uit staat (zie bv. deze; incl. fader als js wel aan staat).
- Links toevoegen aan de images.
- Enz. enz.!
Met vriendelijke groet,
CSShunter
)
