Ben's Hobbyhoekje -- Fotogalerij III: Carrousel

Fotogalerij III: Carrousel

❮ ❯

Hierboven zie je een fotogalerij, of carrousel zo je wilt. Elke 6 seconden verschijnt er een nieuwe foto in beeld. Als je met de muis over een foto gaat,stopt de beweging, totdat de muis de foto verlaat. Met > en < (staan op de foto) ga je naar de volgende resp. vorige foto.
Als je met alleen een aanraakscherm werkt, kun je de carrousel laten stoppen door op de foto te tikken. De carrousel kun je niet meer herstarten, daar heb je echt een muis voor nodig.
Op deze pagina staat beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, behalve de foto's. Daar moet je zelf voor zorgen.

Er worden twee items besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
Dit is een variant van het item Fotogalerij. Het zichtbare verschil is dat de puntjes onder de foto zijn weggelaten en dat de foto's automatisch wisselen. Maar onder de motorkap is er meer veranderd…
De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
De werking van het script
De foto's staan in <div>-tags, elk met eigen id.
Bij het starten van het programma is de eerste foto zichtbaar. De andere foto's staan links naast de eerste foto en zijn onzichtbaar door opacity op nul te zetten.
Als er op > (Volgende foto) wordt getikt of geklikt kijkt het programma welke foto zichtbaar is. De volgende foto wordt in beeld gebracht. Als de laatste foto zichtbaar is, wordt de eerste foto in beeld gebracht.
Als er op < (Vorige foto) wordt getikt of geklikt kijkt het programma welk foto zichtbaar is. De vorige foto wordt in beeld gebracht. Als de eerste foto zichtbaar is, wordt de laatste foto in beeld gebracht.
Een foto wordt zichtbaar gemaakt of verborgen door het van rechts of van links in of uit beeld te schuiven, waarbij de opacity wordt verhoogd van 0 naar 1, of wordt verlaagd van 1 naar 0. Vooral in een breed window of scherm geeft dat een mooi effect.
De beweging wordt gestart door de function initGalerij(), via window.onload. Deze function roept startCarrousel() aan, die er weer zorgt dat VolgendeFoto() elke zes seconden wordt uitgevoerd.
HTML
De HTML bestaat uit één enkele <div>-tag met class="id". Deze is opgemaakt en gepositioneerd met CSS. De code voor deze <div> staat in de <body>, op de plaats in het document waar de fotogalerij moet verschijnen.
Voor elke foto is er binnen de container een <div>-tag met id="no_x", waarin x een uniek volgnummer is. In het voorbeeld worden x = 0, 1, …, 6 gebruikt. Deze nummering begint bij nul, moet aaneengesloten zijn en mag dus geen gaten bevatten. Al deze tags hebben de klasse mySlides, voor de opmaak.
CSS-eigenschappen die moeten veranderen voor het verschuiven en zichtbaar maken van de foto's zijn als style-attribuut opgenomen in de <div>-tags. Het gaat om de eigenschappen left en opacity. Het is vaak niet mogelijk om de CSS-eigenschappen te wijzigen met JavaScript, op een andere manier dan via inline styles.
Chromium-browsers geven in het console een foutmelding op inline style attributen, maar volgens de HTML-specificaties is het correct.
De terug- en vooruitknoppen zijn helemaal gemaakt met <a>-tags, echter zonder href-atribuut. Ze reageren op een muisklik of een tik via onclick. CSS wordt gebruikt voor de positionering en het veranderen van de achtergrondkleur.
De terug-/vooruitknoppen zijn ontleend aan een voorbeeld op w3schools.com.
CSS
De CSS van de container dient alleen voor de opmaak en de positionering. Er worden geen animaties mee gemaakt, dat wordt gedaan door JavaScript.
CSS-eigenschappen die worden veranderd door JavaScript zijn opgegeven in style-attributen. Zie ook de opmerkingen onder het kopje HTML.
De breedte van container is 600px. De position is relative in het document. Om het te centreren wordt margin:0 auto ingezet.
Omdat de breedte-hoogte verhouding van de foto's 16:9 is, is de hoogte van de foto's op het scherm gelijk aan 338px.
De afmetingen van de foto's in het voorbeeld zijn 1920 x 1080 px. Om te zorgen dat de afmetingen zich goed aanpassen aan de container, hebben de <img>-tags het style-attribuut width:100%. Hier is voor een inline-style gekozen omdat het niet werkt als width:100% in de klasse mySlides wordt opgenomen.
De knoppen voor 'vorige' en 'volgende' hebben de klasse prev resp. next. Ze zijn links en rechts op de foto geplaatst. Door top:50% te gebruiken in combinatie met een negatieve waarde van margin-top, staan ze netjes in het midden.
De achtergrondkleur van de knoppen verandert van kleur als de muis er overheen gaat. Dat wordt geregeld met de pseudoklasse :hover.
JavaScript
De animatie van de foto's en andere respons op gebruikers worden gedaan door JavaScript. Daarvoor is een viertal functions gemaakt die hieronder de revue passeren.
Zodra de pagina is geladen wordt de function initGalerij() uitgevoerd via window.onload. Deze function telt het aantal foto's. Dat gaat met document.getElementsByClassName('mySlides').length.
De function vorigeFoto() wordt aangeroepen als er op < wordt geklikt. Als de huidige foto de eerste foto is, wordt de function laatsteFoto() aangeroepen om de laatste foto in de reeks te tonen, anders wordt toonFoto aangeroepen om de vorige foto te laten zien.
De function volgendeFoto() wordt aangeroepen als er op > wordt geklikt. Als de huidige foto de laatste foto is, wordt de function eersteFoto() aangeroepen om de eerste foto in de reeks te tonen, anders wordt toonFoto aangeroepen om de volgende foto te laten zien.
De function toonFoto() wordt aangeroepen door vorigeFoto(), volgendeFoto(), eersteFoto() en laatsteFoto().
Als een foto wordt gewisseld schuift de nieuwe foto in van links en verdwijnt de huidige foto naar rechts; dat geldt als de nieuwe foto een hoger volgnummer heeft dan de huidige. Dat wordt geregeld door de function scrollVanLinks(), die de foto een stapje van moveStep naar rechts schuift. Om te zorgen dat de foto van links naar rechts kan schuiven, wordt die eerst 600px links van de linkerrand van de container gezet. De opacity is nul, dus je ziet hem niet. Bij elk stapje wordt de opacity verhoogd met moveStep/500.
scrollVanLinks wordt met setInterval() elke 0.015 sec. aangeroepen. Als de linkerrand van de nieuwe foto de linkerrand van de container heeft bereikt, wordt clearInterval aangeroepen. Daardoor stopt de beweging.
Het window wordt bij elke stap bijgewerkt door werkSchermBij().
Voor de beweging van rechts naar links is er de function scrollVanRechts(). Die werkt net als scrollVanLinks(), maar dan precies de andere kant op.
De beweging van de carrousel stopt als de muis boven de container komt. Dat wordt geregeld door stopCarrousel(). De reactIe op het mouseover-event wordt ingesteld door initGalerij(), via addEventListener().
De beweging van de carrousel start opnieuw als de muis niet meer boven de container is. Dat wordt geregeld door startCarrousel(). De reactIe op het mouseout-event wordt ingesteld door initGalerij(), via addEventListener().
De code van de functions eersteFoto() en laatsteFoto() is afgeleid van toonFoto(), maar er zijn kleine veschllen. Merk op dat de functions scrollVanLinks(), scrollVanRechts() en werkSchermBij() een beperkte scope hebben. De namen scrollVanLinks() en scrollVanRechts() worden worden meerdere malen gebruikt.
Inbouwen in je eigen site
Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
Regel een stel foto's. Zorg er voor dat ze allemaal even groot zijn.

width:600px

height:338px

styles.js

script.js

Foto's verwijderen doe je door de hele <div>-tag met id="no_x" te verwijderen. Als de verwijderde foto niet de laatste foto is, moet je de overblijvende foto's hernummeren om te zorgen dat er geen gaten in de nummering ontstaan.
Een foto toevoegen doe je door een <div>-tag met id="no_x" in de code op te nemen. Als de nieuwe foto niet de laatste in de reeks is, moet er worden hernummerd zoals hiervoor is beschreven.

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>).

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

(Zet dit in de <BODY> op de plaats waar de galerij moet verschijnen.).

<div id="container">
<div class="mySlides" id="no_0" style="left:0; opacity:1">
<img src="foto-1.jpg" style="width:100%">
</div>
<div class="mySlides" id="no_1" style="left:-600px; opacity:0">
<img src="foto-2.jpg" style="width:100%">
</div>
<div class="mySlides" id="no_2" style="left:-600px; opacity:0">
<img src="foto-3.jpg" style="width:100%">
</div>
<div class="mySlides" id="no_3" style="left:-600px; opacity:0">
<img src="foto-4.jpg" style="width:100%">
</div>
<div class="mySlides" id="no_4" style="left:-600px; opacity:0">
<img src="foto-5.jpg" style="width:100%">
</div>
<div class="mySlides" id="no_5" style="left:-600px; opacity:0">
<img src="foto-6.jpg" style="width:100%">
</div>
<div class="mySlides" id="no_6" style="left:-600px; opacity:0">
<img src="foto-7.jpg" style="width:100%">
</div>


<a class="prev" onclick="vorigeFoto()">❮</a>
<a class="next" onclick="volgendeFoto()">❯</a>
</div>

Downloaden:

Druk op de knop: File: voorb733.zip, 1916 bytes.

Opmerking:

...