Fotogalerij
Hierboven zie je een fotogalerij, of carrousel zo je wilt. Als je op een rondje klikt of tikt, krijg je de overeenkomende
foto te zien. Met > en < (staan op de foto) ga je naar de volgende resp. vorige foto.
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:
- De werking van het script.
- Inbouwen in je eigen site.
- Inspiratie voor dit item is ontstaan door het item Een berichtenlezer zoals een fotogalerij. Voor deze pagina heb ik het verbouwd tot fotogalerij.
- 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, gebeurt er niets.
- 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, gebeurt er niets.
- 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.
- Als er op een lichtgrijs bolletje wordt getikt of geklikt, wordt de overkomende foto zichtbaar gemaakt. Als er op het
donkergrijze bolletje wordt geklikt, gebeurt er niets.
Als er van foto wordt gewisseld, verandert het donkergrijze bolletje van plaats.
- HTML
- De HTML bestaat uit twee <div>-tags met class="container" resp. zonder class maar met alleen een style-attribuut om de inhoud te centreren. De container is opgemaakt en gepositioneerd met CSS. De code voor deze <div>'s staan in de <body>, op de plaats in het document waar de fotogalerij moet verschijnen. De container staat boven de andere <div>-tag.
- 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 navigatiebalk (de grijze bolletjes onder de foto's) bevinden zich in de tweede <div>-tag. Ze zijn helemaal gemaakt met CSS met de klasse dot. Ze reageren op een muisklik of een tik via onclick.
- De terug- en vooruit-knoppen zijn ook helemaal gemaakt met <a>-tags, echter zonder href-attribuut. Ze reageren op een muisklik of een tik via onclick. CSS wordt gebruikt voor de positionering en het veranderen van de achtergrondkleur.
- De navigatiebalk en 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. De animatie van de navigatiebalk wordt wél door CSS gedaan.
- 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.
- De bolletjes hebben de klasse dot. Het zijn vierkantjes met een lichtgrijze achtergrond en een afrondingsstraal
van 50%. Het bolletje dat overeenkomt met de zichtbare foto wordt donkergrijs doordat de achtergrondkleur wordt veranderd
door de klasse active toe te voegen. Het zelfde gebeurt als de muis er overheen gaat via dot: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. Als er meer dan één foto is wordt ook de navigatiebalk zichtbaar gemaakt.
- De function vorigeFoto() wordt aangeroepen als er op < wordt geklikt. Als de huidige foto de eerste foto is, doet de function niets, 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, doet de function niets, anders wordt toonFoto aangeroepen om de volgende foto te laten zien.
- De function toonFoto() wordt aangeroepen door vorigeFoto(), volgendeFoto() of als er op een bolletje
wordt geklikt.
Als er op het donkergrijze bolletje wordt geklikt, gebeurt er niets. Als er op een lichtgrijs bolletje wordt geklikt, wordt de foto die hoort bij het lichtgrijze bolletje getoond. - 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 functions scrollVanLinks(), scrollVanRechts() en werkSchermBij() vallen binnen de scope van
toonFoto(), waardoor ze niet van buiten toonFoto() kunnen worden aangeroepen.
- 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.
- Pas de CSS aan voor de kleuren van de navigatiebalk.
- Als je eigen foto's een andere beeldverhouding hebben dan 16:9, of als de galerij andere afmetingen moet hebben in je
document, moeten er een paar wijzigingen worden aangebracht in de CSS en het JavaScript:
- CSS: wijzig de afmetingen width:600px en height:338px: regels 10 en 17 in file styles.js.
- JavaScript: wijzig de breedte: getallen 600 resp. -600: regels 32 en 37 in file script.js.
- Foto's verwijderen doe je door de hele <div>-tag met id="no_x" te verwijderen, samen met
de <div>-tag met id="no_x" en klasse dot. De administratie wordt automatisch meegenomen.
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, samen
de <div>-tag met id="no_x" en klasse dot.
Als de nieuwe foto niet de laatste in de reeks is, moet er worden hernummerd zoals hiervoor is beschreven.
- Tenslotte:
- Dit effect komt het beste tot zijn recht als er niet meer dan tien foto's 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>).
<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>
<!-- Knoppen volgende en vorige -->
<a class="prev" onclick="vorigeFoto()">❮</a>
<a class="next" onclick="volgendeFoto()">❯</a>
</div>
<br>
<!-- de bolletjes -->
<div style="text-align:center">
<span class="dot" id="dot_0" onclick="toonFoto(1)"></span>
<span class="dot" id="dot_1" onclick="toonFoto(2)"></span>
<span class="dot" id="dot_2" onclick="toonFoto(3)"></span>
<span class="dot" id="dot_3" onclick="toonFoto(4)"></span>
<span class="dot" id="dot_4" onclick="toonFoto(5)"></span>
<span class="dot" id="dot_5" onclick="toonFoto(6)"></span>
<span class="dot" id="dot_6" onclick="toonFoto(7)"></span>
</div>
Downloaden:
Druk op de knop:
File: voorb730.zip, 1984 bytes.
Opmerking:
Deze aanpak is ook geschikt voor het weergeven van berichten.
