Een lichtbak voor afbeeldingen op deze webstek

Een lichtbak?

Zeer algemeen is een lichtbak tegenwoordig een lichtdoorlatend oppervlak waarop andere, minder lichtdoorlatende, elementen op aangebracht worden. De naam is afkomstig van zijn meestvoorkomende vorm: een rechthoekige bak waarin lampen zijn aangebracht, met een half-doorzichtige witte zijde waarop anderen dingen aangebracht kunnen worden. In de fotografie wordt deze term ook gebruikt wanneer men een volledig witte en belichte omgeving waarin met voorwerpen plaatst om te fotograferen.

Dit brengt ons meteen bij het doel van de lichtbak: door een beter contrast, betere belichting, en afwezigheid van afleidingen zorgt hij ervoor dat het onderwerp volledig tot zijn recht komt.

Lichtbakken komen in vele vormen, waarvan u hieronder enkele voorbeelden kan zien.

De digitale lichtbak

Gebruikers van software zijn notoir afgeleid en goed in het negeren van waarschuwingen. Om hier aan tegemoet te komen bestaat bij gebruikersomgevingen ook het concept van een lichtbak. In het midden van het scherm komt iets waarop het programma de aandacht wil vestigen, en de rest van het venster wordt met vaak halfdoorzichtige een kleur afgedekt. Op die manier lijkt een digitale lichtbak visueel sterk op een fysieke lichtbak.

Lichtbakken als ontwerpelement van software ontstonden rond 2005. In 2008 bekroonde de befaamde ontwerper Jakob Nielsen (en zijn bedrijf, Nielsen Norman Group) dit paradigma tot de ontwerptechniek voor dialoogvensters van het jaar.

Dit concept wordt ook misbruikt voor wat dan een pop-up heet: een advertentie of aansporing om zich in te schrijven voor allerhande. Zelfs voor legitieme gebruiken wordt aangeraden om deze zoveel mogelijk te beperken: het is heel disruptief voor gebruikers. Zo is het vervelend als de informatie die nodig is om een goede beslissing te kunnen maken verborgen wordt door de lichtbak.

Digitale lichtbakken voor beeldmateriaal

Hierboven gaat het voornamelijk om dialoogvensters of andere gebeurtenissen die de gebruiker moeten waarschuwen of om bevestiging vragen. Toch zijn er nog andere gevallen waarin de focus op een bepaald stuk gelegd kunnen worden: het bekijken van beeldmateriaal, met stilstaande en bewegende beelden in het bijzonder (foto’s en video’s dus).

Een eerste, veelgebruikt raamwerk hiervoor, Lightbox, werd al eind 2005 gepubliceerd door Lokesh Dhakar. Het is zeker een vroeg raamwerk hiervoor, en Wikipedia beweert dat dit het originele raamwerk is. Zo ook dit artikel, dat besluit met „Behold, the marvels of JavaScript and CSS. We are definitely taking huge step into Web 2.0”.

Het is onduidelijk of Dhakar ook het concept bedacht heeft, of enkel de implementatie voor JavaScript gemaakt heeft. Andere populaire programma’s uit die tijd gebruiken het niet. Visueel ziet het er wel hetzelfde uit, maar de programma’s openen de foto’s vaak in hetzelfde venster, niet in een dialoogvenster.

Sindsdien zijn er talloze varianten, klonen en nieuwe versies gepubliceerd. Het concept is nu redelijk wijdverspreid: zelfs KDE Plasma 6, met het standaardthema, maakt de achtergrond donkerder als een dialoogvenster verschijnt.

Lichtbakken op deze website

Veel van de bestaande raamwerken gebruiken veel JavaScript, onnodige stijlelementen en andere complicaties die hier niet nodig zijn. Daarom is er een op maat gemaakte oplossing voor deze website toegevoegd.

De kern van deze oplossing het is HTML5-element <dialog>. Dit ingebouwde element laat toe om zonder JavaScript een dialoogvenster te tonen. Samen met enkele toevoegingen aan het element <button> kunnen dialoogvensters getoond en verborgen worden zonder zelf JavaScript te moeten schrijven:

De implementatie hiervan is eenvoudig:

<dialog id="sample-dialog" closedby="any">
    Dit is een voorbeeld van een dialoogvenster.
    <form method="dialog">
        <button>Sluiten</button>
    </form>
</dialog>
<button command="show-modal" commandfor="sample-dialog">
    Venster openen
</button>

Zoals steeds heeft het gebruik van ingebouwde elementen veel voordelen: dit dialoogvenster kan ook gesloten worden door op kbd:[esc] te drukken, of buiten het venster te klikken. Ook de toegankelijkheid van het dialoogvenster is in orde. Met die basis is een kleine JavaScript-klassen geschreven, die dynamisch het dialoogvenster opent met de juiste inhoud als op een afbeelding geklikt wordt.

Omdat het dialoogvenster toelaat om naar de volgende en vorige foto te gaan, is er ook de mogelijkheid om meerdere lichtbakken tegelijk aan te maken, die elk enkel hun eigen foto’s tonen. Hiervoor wordt het element <template> gebruikt. Dat ziet er als volgt uit:

<template id="dialog-template">
    <dialog id="sample-dialog" closedby="any">
        ...
    </dialog>
</template>

Dit element laat toe om een html-fragment in te sluiten op een pagina, maar er geen deel van uit te maken. Bij het aanmaken van de lichtbak zal de code van dit sjabloon een kopie maken, de inhoud aanpassen, en tot slot toevoegen aan het html-document zelf.

Een nadeel van de aanpak om toch JavaScript toe te voegen om het dialoogvenster te beheren is dat dit niet zal werken zonder JavaScript. Dat terwijl het gewone dialoogvenster (zoals het voorbeeld met knop hierboven) wel zal werken met het dialoogvenster. In de toekomst kunnen we overwegen om elke afbeelding te voorzien van een knop, en voor elke afbeelding een dialoogvenster te genereren, om het zo ook te laten werken als er geen JavaScript is. Dit maakt wel de gegenereerde pagina lelijker, dus het zal een afweging zijn.

Wie interesse heeft kan altijd eens klikken op de afbeeldingen bovenaan dit stuk om het uit te proberen. Alle suggesties of opmerkingen welkom, zij het dat u best een moderne browser gebruikt, anders werkt het misschien niet. Wie technische interesse heeft, kan de code altijd bekijken door de bron van de pagina te openen in uw browser. Zoals steeds is de code op deze website niet geminimaliseerd.