Ben's Hobbyhoekje -- Fotogalerij IV: op de foto klikken om te wisselen

Fotogalerij IV: op de foto klikken om te wisselen

Hierboven zie je een fotogalerij, of carrousel zo je wilt. Als je aan de rechterkant of aan de linkerkant op de foto klikt of tikt, ga je naar de volgende resp. vorige foto. De breedte van de gevoelige gebieden is ⅓ van de breedte van de foto.
Als je bij de eerste of de laatste foto bent aangekomen, kun je niet verder terug of vooruit.
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.
Inspiratie voor dit item is ontstaan door de Schriftinspiratie en de Gebedsinspiratie in de rubriek "Dagelijkse vernieuwing" de Bible-app van YouVersion voor Android. Voor deze pagina heb ik het verbouwd tot fotogalerij zoals in het item Een berichtenlezer zoals een 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.
Bovenop de foto liggen twee transparante <div>-tags, elk even hoog als de foto; de breedte is ⅓ van de breedte van de foto. De ene is aan de linker kant van de foto geplaatst, de andere aan de rechter kant. Deze twee fungeren als "terug"- en "vooruit"-knoppen.
Als je op een van deze <div>-tags klikt of tikt, verschijnt de vorige of de volgende foto in beeld. Je kunt niet terug voorbij de eerste foto of verder voorbij de laatste foto.
HTML
De HTML bestaat uit één <div>-tag met class="container". Deze 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.
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 twee "gevoelige" gebieden hebben te klasse linkerblok resp. rechterblok. Ze zijn absoluut gepositioneerd binnen de container, aan de linkerkant (left:0, resp.right:0). De breedte is ingesteld op 200px, maar dat kan vergroot worden tot 50%. Ze mogen elkaar niet overlappen.
Om te zorgen dat ze echt boven de foto liggen, hebben ze z-index:1. Ze zijn in de HTML aanklikbaar gemaakt met onclick. Om het voor de gebruiker zichtbaar te maken aan te geven dat het aanklikbaar is, hebben ze cursor:pointer, waardoor de muispijl verandert in een handje als je er met de muis overheen gaat.
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 het linker ⅓ deel van de foto wordt geklikt of getikt. 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 het rechter ⅓ deel van de foto 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 alleen aangeroepen door vorigeFoto() en volgendeFoto().
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.
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.
- CSS: wijzig de afmetingen width:200px, zodanig dat de breedte ⅓ van de breedte van de foto's wordt: regels 23 en 31 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. 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.
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 maar een paar foto's zijn, omdat je er gemakkelijk in verdwaalt.
Op een of andere manier moet je aan de bezoekers van je site vertellen hoe ze het fotoalbum moeten bedienen, anders wordt het niet begrepen en zullen de bezoekers de pagina verlaten. Dit manco zie je ook bij de app die de inspiratie was voor deze pagina.

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 het fotoalbum 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>


<div class="linkerblok" onclick="vorigeFoto()"></div>
<div class="rechterblok" onclick="volgendeFoto()"></div>
</div>

Downloaden:

Druk op de knop: File: voorb735.zip, 1607 bytes.