Foto-carrousel met tijdbalk en hyperlinks II

Hieronder zie je een foto. Daarbovenop loopt een tijdbalk. Als de balk vol is wordt die ge-reset en verschijnt een andere foto.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, behalve de foto's.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Dit is een bewerking van het item Foto-carrousel met tijdbalk en hyperlinks. Er is echter maar één tijdbalk in plaats van vier. Het wisselen van de foto's wordt gestuurd door het vollopen van de tijdbalk, in plaats van andersom.
• 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 tijdbalk wordt geregeld door één JavaScript-proces. Elke 0.1 seconde wordt de tijdbalk 2px langer gemaakt. Als de tijdbalk 230px of langer is geworden, wordt deze gereset en wordt de volgende foto getoond.
• 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 een <div>-tag, met de klasse bgd. Dit is de grijze tijdbalk bovenop de foto's.
• Dan zijn er nog de <div>-tag, met id="fgd". Dit is de lopende witte tijdbalk bovenop de foto's.
   
• CSS
• De CSS-klasse carrousel en id melding zijn relatief gepositioneerd. De klasse en id binnen carrousel zijn absoluut gepositioneerd.
• De klasse carrousel bepaalt de plaats en de afmetingen van de foto-carrousel met de daarop liggende tijdbalk. 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 (half juni 2023).
• De klasse bgd en de id="fgd" zijn bijna identiek. De enige verschillen zijn de achtergrondkleur (grijs. vs. wit), de z-index (10 resp. 11, om te zorgen dat de grijze balk boven de foto ligt en de witte balk daar meteen bovenop) en de breedte (230px constant resp. 0, groeit naar 230px).
• 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 function doeBalk() op, met interval van 0.1 seconden. Dat gaat met setInterval().
• doeBalk() maakt de tijdbalk bij elke aanroep twee pixels langer. Dat betekent dat de tijdbalk na 115 aanroepen vol is (de tijdbalk is 230px breed).
• Zodra de tijdbalk vol is wordt de lengte teruggezet op nul en wordt volgendeFoto() aangeroepen.
• volgendeFoto() maakt, zoals de naam aangeeft, de volgende foto zichtbaar en zet de tekst onder de foto terug naar "Klik of tik op de foto". Dat laatste wordt gedaan door melding() aan te roepen.
   
• 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 minder goed zichtbaar wordt.
• Als je een groter formaat van de foto's wilt, moet je de tijdbalk langer te maken. Dat doe je door width in de klasse bgd te vergroten. Daarbij moet je in de regel if (breed >= 230) breed = 0; (in de function doeBalk()) het getal 230 veranderen in de nieuwe breedte. In de function initCarrousel() wijzig je het interval bij doeBalk() van 100 in een lager getal en/of je verhoogt in de regel breed += 2; het getal 2.
• Het is een kwestie van een beetje spelen met de parameters om het goed te krijgen. Zorg ervoor dat de foto's steeds ca. 6 tot 15 seconden zichtbaar zijn.

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;
}
.bgd {
  position:absolute;
  top:10px;
  width:230px; height:4px;
  background-color:#ccc;
  z-index:10;
}
#fgd {
  position:absolute;
  top:10px;
  width:0; height:4px;
  background-color:#fff;
  z-index:11;
}
.bgd, #fgd { left:10px; }
#bericht { text-align:center; }
</style>
<script>
let dezeFoto = 1, breed = 0, balk;
function volgendeFoto() {
  document.getElementById("foto_"+dezeFoto).style.display = "none";
  if (dezeFoto == 4) dezeFoto = 1;
  else dezeFoto++;
  document.getElementById("foto_"+dezeFoto).style.display = "block";
  melding(0);
}
function doeBalk() {
  if (breed >= 230) {
    volgendeFoto();
    breed = 0; // voor de volgende foto
  }
  breed += 2;
  document.getElementById("fgd").style.width = breed + "px";
}
function initCarrousel() {
  balk  = setInterval(doeBalk,100);
  melding(0);
}
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="bgd"></div> <!-- achtergrond -->
  <div id="fgd"></div> <!-- voorgrond -->
</div>
<div id="bericht"></div>

Downloaden:
 
Druk op de knop:  File: voorb725.zip, 996 bytes.

Opmerking:
 
Een iets complexere uitvoering van deze carrousel vind je in het item Foto-carrousel met tijdbalk en hyperlinks.