Afbeeldingen weergeven met Lightbox
Lightbox is een JavaScript-applicatie die wordt gebruikt om grote afbeeldingen te tonen op een website. De afbeeldingen worden getoond in een "Modal Dialog".
Een modal dialog is een window ('kind') dat wordt gemaakt door een ander window (de 'ouder'). De werking
van het ouder-window wordt bevroren totdat het kind-window is gesloten.
Op deze wijze maakt Lightbox het mogelijk om grote foto's op je site te vertonen, zonder dat je bezoekers
de huidige pagina hoeven te verlaten. Door de donkere, enigszins transparante, achtergrond van het modal
window wordt de aandacht van je bezoekers op de foto's gericht.
Lightbox (volledige naam: Lightbox JS) is bedacht door de Amerikaanse programmeur
Lokesh Dhakar. Na de introductie in 2005(?) werd
Lightbox al heel snel populair. Andere programmeurs kwamen al gauw met hun eigen versies van Lightbox.
In maart 2006 verscheen een verbeterde versie, Lightbox JS v2, kortweg Lightbox2. Deze versie kan
ook eenvoudige diavoorstellingen tonen.
Op het moment dat dit geschreven wordt is LightBox versie 2.8.1 het meest recent. Deze versie gebruikt het jQuery-platform
voor de animaties.
In de loop der tijd zijn er veel varianten op Lightbox verschenen, die verschillen in omvang en mogelijkheden. Zo zijn
er varianten die behalve met foto's ook met video en tekst overweg kunnen.
Er bestaan ook plugins voor sommige Content Management Systemen, waaronder WordPress en Drupal.
De werking voor de gebruiker is eenvoudig: Klik op een link (dat kan een plaatje zijn, maar ook een gewone tekst-link) en Lightbox toont de foto(-serie) op het scherm.
|
Voorbeeld 1: Enkele foto Klik op het plaatje hiernaast. Je sluit het af door op het kruisje te klikken. |
 | |
| Voorbeeld 2: Serie foto's Hiernaast staan een paar tekst-links. Als je er op klikt wordt de betreffende foto uit de serie getoond. Je kunt dus op elk willekeurig punt van de serie beginnen. Je navigeert door de foto-serie door op de linker- of rechterhelft van de foto te klikken of te tikken. Als de muis boven de foto zweeft, geeft Lightbox met "<" en/of ">" aan, dat je terug moet of verder kunt. Als een muis niet beschikbaar is (telefoon, tablet) ontbreekt deze faciliteit. Je sluit het af door op het kruisje te klikken. |
Truck Hier? Ferrari Pinguin New Cuyama Links? Rechts? | |
- Lightbox is heel eenvoudig in te bouwen in je website:
- Download de file lightbox2_master.zip vanaf de Lightbox2-website en pak hem uit.
- Open de map dist.
- Kopieer de submappen js, images en css naar de map waar de je eigen HTML-code staat. Andere locaties
voor deze submappen zijn mogelijk, maar vragen directe ingrepen in de JavaScripts en het stylesheet. Dat raad ik dus niet aan.
De overige informatie in de uitgepakte zip-file heb je niet nodig. - In de map images staan vier plaatjes die voor je eigen toepassing nodig zijn: close.png, loading.gif, next.png en prev.png.
- De submap css bevat de CSS die nodig is voor de opmaak.
- Zet de volgende regel code in de <HEAD>:
<link rel="stylesheet" href="css/lightbox.css">
- Mogelijkheid 1: Je gebruikt al jQuery in je webdocument
- Verwijder alle bestanden uit de submap js, uitgezonderd de file lightbox.min.js
- Zet de volgende regel code aan het einde van de <BODY> (dus net voor de </body>-tag), in elk geval
na de code waarmee je de jQuery-code invoegt:
<script src="js/lightbox.min.js"></script>
- Mogelijkheid 2: Je gebruikt géén jQuery in je webdocument
- Verwijder alle bestanden uit de submap js, uitgezonderd de file lightbox-plus-jquery.min.js
- Zet de volgende regel code aan het einde van de <BODY> (dus net voor de </body>-tag):
<script src="js/lightbox-plus-jquery.min.js"></script>
- Voor het weergeven van een losse foto gebruik je deze code:
Code van het voorbeeld op deze pagina.
<a href="muizeval.jpg" data-lightbox="lightbox"
data-title="Waarom sommige muizenvallen niet effectief zijn"
title="Waarom sommige muizenvallen niet effectief zijn">
<img src="muizeval.jpg" alt="Klik: Enkele foto"
width="100" border="0"></a>
- Zet deze in de <BODY>, op de plaats waar je hem nodig hebt.
- Voor het weergeven van een serie foto's gebruik je:
Code van het voorbeeld op deze pagina.
<a href="truck.jpg" data-lightbox="example-set"
data-title="Moderne vormgeving"
title="Moderne vormgeving">Truck</a>
<a href="dismus.jpg" data-lightbox="example-set"
data-title="Zou het hier zijn of toch niet?"
title="Zou het hier zijn of toch niet?">Hier?</a>
<a href="ferrari.jpg" data-lightbox="example-set"
data-title="Een Ferrari is een rode Auto met een Paard"
title="Een Ferrari is een rode Auto met een Paard">Ferrari</a>
<a href="pinguin.jpg" data-lightbox="example-set"
data-title="Waarom er geen pinguins leven op de Noordpool">
title="Waarom er geen pinguins leven op de
Noordpool">Pinguin</a>
<a href="newcuyama.jpg" data-lightbox="example-set"
data-title="Reken je rijk"
title="Reken je rijk">New Cuyama</a>
<a href="keepright.jpg" data-lightbox="example-set"
data-title="Wat bedoel je?"
title="Wat bedoel je?">Links? Rechts?</a>
- Ook deze zet je in de <BODY>, op de plaats waar je hem nodig hebt.
Een paar opmerkingen bij het gebruik van Lightbox:
- Het verschil tussen een losse foto en een foto-serie wordt bepaald door het data-lightbox-attribuut van de <A>-tag:
Bij een foto-serie voeg je een aantal <a>-tags toe, met dezelfde naam in data-lightbox. Deze naam kun je
vrij kiezen. Alle foto's met die zelfde naam worden opgenomen in die betreffende serie.
Een losse foto heeft een unieke naam in data-lightbox staan (het is eigenlijk een serie van één foto). - Het bijschrift bij de foto's geef je op in het data-title-attribuut van de <A>-tag.
- Je kunt een <a>-tag voorzien van een title-attribuut, zoals op deze pagina is gedaan. Als de <a>-tag een plaatje bevat, kan het title-attribuut ook in de <img>-tag staan.
- Er kunnen meerdere 'losse' foto's en foto-series in één document voorkomen.
- Lightbox is niet beperkt tot foto's (.jpg). Alle grafische formaten die een browser kan weergeven kun je gebruiken.
- Je kunt de aanduidingen X, < en > vervangen door iets anders, door het aanpassen van de figuren close.png, next.png en prev.png.
- De melding 'Afbeelding # van #' (bij de foto-serie) is de vertaling van het Engelse 'Image # of #'. Dit bereik je door lightbox.min.js of lightbox-plus-jquery.min.js aan te passen. Zoek in het bestand naar 'Image %1 of %2' en verander dat in 'Afbeelding %1 van %2'.
- Let op: Je doet dit in de geminimaliseerde (minimized) versie van het js.-bestand. Dat kan
met je HTML editor, maar het kan in principe ook met Windows Kladblok.
Het is natuurlijk ook mogelijk om de originele bestanden (lightbox.js of lightbox-plus-jquery.js) te wijzigen en daarna te minimaliseren. Dat kan als je zelf over software beschikt om code te minimaliseren. Gebruik van online tools raad ik af; de bestanden zijn daar te groot voor.
Informatie over het minimalieren van Javascript-code vind je in het item Over het comprimeren van JavaScript-code.
- In deze versie van Lightbox zit een kleine onhebbelijkheid: De kleur van het bijschrift van de foto is ingesteld op grijs (#999999). Daar is op zich niets mis mee, behalve als de tekst-kleur van de <BODY> met behulp van CSS wordt ingesteld. Op veel sites (waaronder deze) is dat zwart. De kleur van het bijschrijft bij de foto's wordt nu ook zwart. Op de standaard donkergrijze achtergrond is dat niet leesbaar.
- Je kunt dit omzeilen door lightbox.css aan te passen:
- Open lightbox.css en zoek de code
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
} - Voeg de dikgedrukte regel in; de code wordt nu:
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
color: yellow;
} - Zoek nu de code:
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
} - Verander de dikgedrukte regel; de code wordt nu:
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: lime;
}
- Open lightbox.css en zoek de code
- Voor de kleuren kun je elke geldige HTML- en CSS-kleurnaam of -code invullen. Hier zijn geel en lichtgroen gebruikt, maar
je kunt natuurlijk de kleuren nemen die je zelf wilt.
Zie ook het item Kleurcodes voor tekst, links en achtergrond.
- Lightbox is zeer geschikt voor het weergeven van foto-presentaties, product-foto's, enzovoort. Toch kleeft er een nadeel
aan Lightbox: Als de afbeelding groter is dan de beschikbare ruimte op het scherm, valt een deel van de afbeelding buiten
het scherm. Een afbeelding van 1600x1200 pixels past nu eenmaal niet op een scherm van 1280x1024 pixels, om eens wat te noemen
. - De afbeeldingen die je met Lightbox op je site wilt tonen moeten ook niet te klein zijn. Er is nl. altijd ruimte nodig
voor het bijschrift en de < / > / X-knoppen. De afbeeldingen moeten daarom niet kleiner zijn dan
270px breed en 100px hoog. Als je daaronder komt kan het gebeuren dat het bijschrift en de < / > / X-knoppen
gedeeltelijk onzichtbaar worden of verkeerd worden geplaatst.
Vergelijk de plaats van de X-knop bij de laatste foto van de fotoserie maar eens met de andere vijf foto's - Als je je website schrijft voor gebruik met een mobiele telefoon, kun je Lightbox beter niet gebruiken. De resolutie van mobiele telefoons is (nog) niet groot genoeg om het effect goed zichtbaar te maken. Voor tabletcomputers geldt deze beperking niet.
Opmerking:
Ook hier geldt: Wees voorzichtig met de toepassing. Te veel beweging op het scherm maakt een bladzijde onrustig en moeilijk
te lezen.
