Een lightbox is de overlay die verschijnt als je op een kleine afbeelding klikt en een grotere versie midden op het scherm opent, met de rest van de pagina gedimd erachter. Je bekijkt hem, sluit hem en je staat weer precies waar je was. De naam komt van de oude lichtbak die fotografen gebruikten om dia’s te bekijken.
Zie het als een museumspot. De zaal gaat donker en één schilderij wordt uitgelicht, zodat je aandacht nergens anders heen kan. Een lightbox op het web doet hetzelfde: hij dimt de pagina en zet één afbeelding of video centraal. Hij wordt vaak gebouwd met een kleine JavaScript library en past goed bij lazy loading, zodat de grote afbeelding pas bij een klik downloadt.
Je ziet lightboxes overal zodra je erop let. Een productpagina waar elke foto inzoomt, een portfolio waar één klik de volledige projectfoto laat zien, of een galerij waar je met pijltjes links en rechts door een reeks bladert zonder ooit te herladen. De bezoeker blijft op één plek en de flow blijft heel.
Goed gedaan voelt het soepel en zit het niet in de weg. Slecht gedaan zet het mensen vast, vooral op telefoons waar de sluitknop piepklein is, dus de sluitactie en de escape-toets moeten allebei werken. Een goede lightbox vergrendelt ook de achtergrond tegen scrollen en geeft de focus terug aan de thumbnail waar je vandaan kwam, wat telt voor toegankelijke UX en mensen met een schermlezer.
Bij TopDevs gebruiken we lightboxes voor galerijen en portfolio’s waar het belangrijk is dat de bezoeker op de pagina blijft, en zorgen we dat ze op elk apparaat makkelijk sluiten.
