Heb je veel foto’s die je op je website wilt laten zien, dan is een fotogalerij een van de manieren waarop je ze aan je bezoekers kunt presenteren. Als je op een van de foto’s uit de mini-galerij hieronder klikt, komt er een donkere overlay over de pagina heen, en daarbinnen wordt een grotere versie van dezelfde foto zichtbaar.
Om zo’n fotogalerij te maken, heb je niets bijzonders nodig. Hij is gemaakt met niet meer dan wat CSS-eigenschappen. De fotogalerij is zelfs responsive. Dus als je de pagina op een smartphone bekijkt (of handmatig je beeldscherm smaller maakt), dan ‘herschikken’ de fotootjes zich automatisch.
Vóórdat je begint, moet je ervoor zorgen dat je de foto’s die je wilt laten zien in deze fotogalerij in twee formaten beschikbaar hebt: in een kleine versie (thumbnail), en in een grotere versie. Die grotere versie moet overigens niet té groot zijn, lees eventueel eerst de informatie over het geschikt maken van foto’s voor het web.
Is dat gebeurd, dan volg je deze stappen om de fotogalerij op je site te zetten:
Eerst maak je een div-element aan, dat je een class geeft, zodat je het straks makkelijk kunt vormgeven. Daarbinnen zet je de code voor elke thumbnail neer, en van die thumbnail maak je een link. Die link leidt straks naar de bijbehorende grote foto. Dat ziet er bijvoorbeeld zó uit: <div class="fotogalerij"> <a href="foto1"><img src="images/tn-blauwe-zeilen.jpg" alt="blauwe zeilen thumbnail"></a> </div>
div
class
<div class="fotogalerij"> <a href="foto1"><img src="images/tn-blauwe-zeilen.jpg" alt="blauwe zeilen thumbnail"></a> </div>
Onder het div-element met de fotogalerij komt weer een div. Dit is bestemd voor de grote versie van de foto. Elke grote foto krijgt zijn eigen div. Dit div krijgt een een class - voor de vormgeving straks - en een id. Dat id is nodig om de link van elke thumbnail te laten leiden naar de bijbehorende grote foto. Voorbeeld: <div class="foto-popup" id="foto1"></div>
id
<div class="foto-popup" id="foto1"></div>
Binnen dit div-element komen drie link-elementen te staan. Binnen het eerste link-element komt de afbeeldingscode voor de grote foto te staan, binnen het tweede link-element komt de code voor een pijltje naar links te staan, en binnen het tweede link-element de code voor een pijltje naar rechts. Voor de opmaak krijgt het pijltje naar links alvast de class vorige en het pijltje naar rechts de class volgende.
De linkbestemming van de grote foto is alleen een hekje (#). Als er op die grote foto wordt geklikt, wordt de galerij alleen afgesloten, maar blijft de bezoeker op deze pagina. De twee links van de pijltjes verwijzen natuurlijk naar de vorige resp. de volgende foto. Dat kan er zó uitzien: <a href="#"><img src="images/blauwe-zeilen.jpg" alt="blauwe zeilen"></a> <a href="#foto6" class="vorige">⊲</a> <a href="#foto2" class="volgende">⊳</a>
#
<a href="#"><img src="images/blauwe-zeilen.jpg" alt="blauwe zeilen"></a> <a href="#foto6" class="vorige">⊲</a> <a href="#foto2" class="volgende">⊳</a>
Nu moet de fotogalerij alleen nog worden vormgegeven. Voor de galerij met de thumbnails op deze pagina heb ik de volgende eigenschappen gebruikt: .fotogalerij { width: 400px; max-width: 100%; margin: 20px auto; text-align: center; } .fotogalerij img { border: 1px solid darkgrey; margin: 4px; }
.fotogalerij { width: 400px; max-width: 100%; margin: 20px auto; text-align: center; } .fotogalerij img { border: 1px solid darkgrey; margin: 4px; }
En de pop-up-vensters op deze pagina met de foto’s en pijltjes daarbinnen zijn op de volgende manier vormgegeven: .foto-popup { display: none; } .foto-popup:target { display: block; position: fixed; z-index: 999; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); text-align: center; } .foto-popup img { max-width: 90%; position: relative; top: 50%; transform: translateY(-50%); } .vorige, .volgende { position: fixed; top: 50%; transform: translateY(-50%); text-decoration: none; color: darkgrey; font-size: 5em; } .vorige:hover, .volgende:hover { color: white; } .vorige { left: 20px; } .volgende { right: 20px; } @media screen and (max-width: 400px) { .vorige, .volgende { font-size: 3em; } }
.foto-popup { display: none; } .foto-popup:target { display: block; position: fixed; z-index: 999; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); text-align: center; } .foto-popup img { max-width: 90%; position: relative; top: 50%; transform: translateY(-50%); } .vorige, .volgende { position: fixed; top: 50%; transform: translateY(-50%); text-decoration: none; color: darkgrey; font-size: 5em; } .vorige:hover, .volgende:hover { color: white; } .vorige { left: 20px; } .volgende { right: 20px; } @media screen and (max-width: 400px) { .vorige, .volgende { font-size: 3em; } }
En ten slotte moet je alle bestanden van deze fotogalerij uploaden naar je server. Dat zijn dus je html-pagina en natuurlijk de thumbnails en grote versies van de foto’s die je wilt laten zien. En daarmee is je fotogalerij klaar!
« Ga terug
