Foto-carrousel met tijdbalk en hyperlinks
Hieronder zie je een eenvoudige foto-carrousel, die steeds vier foto's laat zien. Bovenop de carrousel zie je vier tijdbalkjes.
Als de eerste foto voor staat, loopt het eerste balkje. Zodra dat vol is, verschijnt de tweede foto en start het tweede balkje.
Daarna volgt de derde foto, enzovoort. Als het vierde balkje vol is, begint de cyclus overnieuw.
De foto's zijn aanklikbaar. Als je er op klikt of tikt verschijnt er een melding over de foto.
Op deze pagina wordt beschreven hoe je zoiets maakt. De code staat onderaan de pagina. Die kun je ook downloaden om zelf te
gebruiken, uitgezonderd de foto's. daar moet je zelf voor zorgen.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Dit effect heb ik voor het eerst gezien in de app en de website van RTV Rijnmond, maar ook in andere apps en websites
kun je dit tegenkomen. Voor deze site heb ik het effect met de tijdbalkjes nagebouwd.
De melding onder de foto's heb ik toegevoegd om de hyperlinks onder de foto's te demonstreren. - De code bestaat uit HTML, CSS en JavaScript. In het voorbeeld staan de CSS en het JavaScript in het HTML-document, maar
ze kunnen natuurlijk ook in aparte bestanden staan.
- De werking van het script
- De animatie van de foto's en de tijdbalkjes wordt geregeld door twee min-of-meer gelijklopende JavaScript-processen. Omdat dit kan ontsporen worden de processen regelmatig gesynchroniseerd door ze opnieuw op te starten.
- De meldingen onder foto die worden getoond als op de foto wordt geklikt, worden gereset zodra er van foto wordt gewisseld.
- HTML
- De HTML bestaat uit twee <div>-tags. De eerste stelt de klasse carrousel in. Hiermee worden de plaats
van de foto-carrousel en de afmetingen vastgelegd.
De tweede heeft id="bericht". Hier verschijnen de meldingen als je op een foto klikt of tikt. Deze tag volgt direct na de eerste om te zorgen dat de melding netjes onder de foto komt. - carrousel bevat <img>-tags, een voor elke foto, die allemaal een uniek id hebben:foto_1, …, foto_4. Ze hebben ook allemaal het attribuut style="display: … ". JavaScript gebruikt dat om de foto's zichtbaar te maken of te verbergen.
- Behalve dat bevat carrousel nog vier <div>-tags, met de klassen bg_1, … bg_4. Dit zijn de vier grijze tijdbalkjes bovenop de foto's.
- Dan zijn er nog de vier <div>-tags, met de id's fg_1, … fg_4. Dit zijn
de vier lopende witte tijdbalkjes bovenop de foto's.
- CSS
- De CSS-klasse carrousel en id melding zijn relatief gepositioneerd. De klassen en id's binnen carrousel zijn absoluut gepositioneerd.
- De klasse carrousel bepaalt de plaats en de afmetingen van de foto-carrousel met de daarop liggende tijdbalkjes. Om aan te geven dat je hier op kunt klikken of tikken is de eigenschap cursor:pointer toegevoegd. Om onduidelijke redenen blijft, in Edge onder Android en op een tablet met een muis en een aanraakscherm, de cursor een pijl. Andere browsers doen dat wel goed. Ook op een PC gaat het goed. Dit geldt op de datum dat dit geschreven wordt (begin juni 2023).
- De klassen bg_1, … bg_4 en de id's fg_1, … fg_4 zijn bijna identiek. De enige verschillen zijn de achtergrondkleur (grijs. vs. wit), de z-index (10 resp. 11, om te zorgen dat de grijze balkjes boven de foto liggen en de witte balkjes daar meteen bovenop) en de breedte (50px constant resp. 0, groeit naar 50px).
- De hier niet genoemde id's worden niet opgemaakt met CSS.
- JavaScript
- Als de pagina is geladen wordt de function initCarrousel() gestart. Deze start op zijn beurt de functions doeBalk() en volgendeFoto(), met intervallen van 0.1 resp. 5 seconden. Dat gaat met setInterval().
- doeBalk() maakt de juiste tijdbalk bij elke aanroep één pixel langer. Dat betekent dat de tijdbalk na 50 aanroepen vol is (de tijdbalk is 50px breed).
- Door volgendeFoto() wordt de foto elke 5 seconden verwisseld en wordt de tekst onder de foto teruggezet naar "Klik of tik op de foto".
- Omdat de foto's en de tijdbalken in verschillende processen worden bijgewerkt, gaan ze na verloop van tijd met elkaar uit
de pas lopen. Daarom worden de processen na elke tien volledige cycli (van vier foto's) afgebroken en opnieuw opgestart. Dat
gebeurt door de function resetCarrousel(), die initCarrousel() aanroept.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op in je document zoals hieronder is aangegeven.
- Regel vier foto's. Zorg ervoor dat de foto's dezelfde afmetingen hebben. In het voorbeeld zijn ze 250px breed en 187px hoog. Als je dezelfde afmetingen aanhoudt hoef je aan de CSS niets te veranderen.
- Bedenk onderschriften voor de foto's.
- Zet de bestandsnamen van de foto's in de HTML. Als je een ander formaat foto's wilt gebruiken dan in het voorbeeld, moet je ook height en width aanpassen, in zowel de klasse carrousel als in de img-tags.
- Een kleiner formaat foto's dan in het voorbeeld raad ik niet aan, om te voorkomen dat het effect slecht zichtbaar wordt.
- Als je een groter formaat van de foto's wilt, is het te overwegen om de tijdbalkjes langer te maken. Dat doe je door width
in de klassen te vergroten. Daarbij moet je in de regel
if (breed == 50) breed = 0;(in de function doeBalk()) het getal 50 veranderen in de nieuwe breedte. In de function initCarrousel() wijzig je het interval bij doeBalk() van 100 in 5000 / breedte. - Het is een kwestie van een beetje spelen met de parameters om het goed te krijgen. Verlaag zo nodig het aantal cycli in
de regel
if (cycli == 10) {in volgendeFoto() om ontsporen van de rekenprocessen te voorkomen.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.carrousel {
position:relative;
width:250px; height:187px;
margin:10px auto;
cursor:pointer;
}
.bg_1, .bg_2, .bg_3, .bg_4 {
position:absolute;
top:10px;
width:50px; height:4px;
background-color:#ccc;
z-index:10;
}
#fg_1, #fg_2, #fg_3, #fg_4 {
position:absolute;
top:10px;
width:0; height:4px;
background-color:#fff;
z-index:11;
}
.bg_1, #fg_1 { left:13px; }
.bg_2, #fg_2 { left:71px; }
.bg_3, #fg_3 { left:129px; }
.bg_4, #fg_4 { left:187px; }
#bericht { text-align:center; }
</style>
<script>
let dezeFoto = 1, breed = 0, fotos, balk, cycli = 0;
function volgendeFoto() {
if (cycli == 10) {
resetCarrousel(); return;
}
document.getElementById("foto_"+dezeFoto).style.display = "none";
if (dezeFoto == 4) {
for (let i=1; i<=4; i++) document.getElementById("fg_"+i).style.width = 0;
dezeFoto = 1;
} else dezeFoto++;
document.getElementById("foto_"+dezeFoto).style.display = "block";
melding(0);
}
function doeBalk() {
if (breed == 50) breed = 0; // voor de volgende balk
breed += 1;
document.getElementById("fg_"+dezeFoto).style.width = breed + "px";
}
function initCarrousel() {
balk = setInterval(doeBalk,100);
fotos = setInterval(volgendeFoto,5000);
melding(0);
}
function resetCarrousel() {
breed = 0; dezeFoto = 1; cycli = 0;
clearInterval(balk);
clearInterval(fotos);
initCarrousel();
}
function melding(nr) {
let xx = document.getElementById('bericht');
switch(nr) {
case 0: xx.innerHTML = "Klik of tik op de foto";
break;
case 1: xx.innerHTML = "De molen van Spijkenisse vóór de verhoging";
break;
case 2: xx.innerHTML = "Dit is een paddenstoel";
break;
case 3: xx.innerHTML = "Een roze roos";
break;
case 4: xx.innerHTML = "Een parkje in de winter";
break;
default: // doe niks
}
}
window.onload = initCarrousel;
</script>
(Zet dit in de <BODY> op de plaats waar de carrousel moet verschijnen).
<div class="carrousel">
<img src="foto-molen.jpg" width="250" height="187" border="0"
id="foto_1" style="display:block" onclick="melding(1)">
<img src="foto-paddenstoel.jpg" width="250" height="187" border="0"
id="foto_2" style="display:none" onclick="melding(2)">
<img src="foto-roos.jpg" width="250" height="187" border="0"
id="foto_3" style="display:none" onclick="melding(3)">
<img src="foto-parkje.jpg" width="250" height="187" border="0"
id="foto_4" style="display:none" onclick="melding(4)">
<div class="bg_1"></div> <!-- achtergrond -->
<div class="bg_2"></div>
<div class="bg_3"></div>
<div class="bg_4"></div>
<div id="fg_1"></div> <!-- voorgrond -->
<div id="fg_2"></div>
<div id="fg_3"></div>
<div id="fg_4"></div>
</div>
<div id="bericht"></div>
Downloaden:
Druk op de knop:
File: voorb724.zip, 1163 bytes.
Opmerking:
Een iets eenvoudiger uitvoering van deze carrousel vind je in het item Foto-carrousel
met tijdbalk en hyperlinks II.
