Lightbox foto popup

Wat is Lightbox? Hoe gebruik je het en wanneer gebruik je het? Door mijn collega Erik-Jan ben ik gevraagd om zo nu en dan een stukje voor Netters.nl te gaan schrijven. Ik ga me voornamelijk bezig houden met het client-side onderdeel. Dus alles op het gebied van HTML, CSS en JavaScript. Daarbij bekijk ik alles vanuit een lichtelijk commercieel perspectief; dus hoe pas je client side technieken toe zodat deze ook daadwerkelijk meerwaarde voor een website gaan bieden en wat zijn de nadelen ervan.

In mijn eerste bijdrage hou ik het voor iedereen (hopelijk) lekker simpel en wil ik in kaart brengen wat er allemaal is op het gebied van Lightbox.

Wat is Lightbox?

Om kleine afbeelding groter weer te geven zonder een nieuw venster te openen gebruiken steeds meer websites een speciaal script: Lightbox. Na een klik op de afbeelding vervaagt de achtergrond van de website en komt de afbeelding groter in beeld. Wikipedia zegt over Lightbox:

Lightbox, and the newer Lightbox 2, is a JavaScript application used to display large images using modal dialogs. The script has gained widespread popularity due to its simple yet elegant style and easy implementation.

Lightbox maakt gebruik van de technieken JavaScript en CSS.

Voordelen van Lightbox

De voordelen van lightbox zijn:

• Het ziet er mooi, strak en modern uit
• Er is geen nieuw scherm nodig om een grotere weergave van een afbeelding te tonen

Je kan het Lightbox script downloaden op de site van Lokesh Dhakar.

Bestanden

De volgende bestanden heb je nodig om lightbox te implementeren:

• Csslightbox.css
• Imagesclose.gif
• Imagescloselabel.gif
• Imagesloading.gif
• Imagesnextlabel.gif
• Imagesprevlabel.gif
• Js builder.js
• Jseffects.js
• Jslightbox.js
• Jsprototype.js
• Jsscriptaculous.js

De afbeeldingen voor de navigatie kan je eventueel aanpassen of vervangen voor je eigen afbeeldingen.
Afhankelijk van het systeem waar je website op draait kan het zijn dat enkele JavaScript bestanden al gebruikt worden, overleg dan even met je webbouwer of kijk even goed naar de verschillen. Mogelijk zijn de JavaScipt bestanden niet compatibel met de JavaScript bestanden die al door je website gebruikt worden, neem dan een kijkje bij de alternatieven onderin deze post. Al deze bestanden zet je met een FTP programma op je webserver.

De installatie

1. In de html bestanden of in het template bestand van je website waar je gebruik wilt maken van Lightbox verwijs je naar locatie van de JavaScript bestanden. Dit doe je door tussen <pre> … </pre> de volgende regels code te plaatsen.


<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>


2. In dezelfde bestanden verwijs je ook naar het CSS bestand. Je kan eventueel ook de CSS code plaatsen in een CSS bestand wat al wordt opgehaald. Deze code zet je wederom tussen .

3. Zorg er vervolgens voor dat in het CSS bestand en in lightbox.js de verwijzingen naar de afbeeldingen voor de navigatie correct zijn.

Klaar?

Nog niet, het enige wat je nu nog moet doen is Lightbox activeren bij een afbeelding.

1. Voeg hiervoor bij een link naar een afbeelding de volgende code toe:

rel="lightbox"

De volledige code voor een afbeelding ziet er als het goed is dan ongeveer als volgt uit:

2. Het is mogelijk om door een set afbeeldingen te navigeren met Lightbox. Gebruik hiervoor de volgende code:

rel="lightbox[vakantiefotos]"

. Dit ziet er dan als volgt uit:

Het resultaat is nu op de website te zien! ?

Varianten

Inmiddels zijn er vele varianten van Lightbox in omloop. Onder andere wehkamp.nl maakt gebruik van een variant. Enkele populaire varianten op een rijtje:

Lightbox slideshow

Een iets aangepaste versie waarbij een set afbeeldingen ook als slideshow weergegeven kunnen worden.

Thickbox

Een versie waarbij het mogelijk is om bijvoorbeeld tekst te gebruiken. Daarnaast maakt het gebruik van een ander JavaScript library (jQuery) die ook kleiner is in omvang.

Shadowbox

Maakt ook gebruik van jQuery. Heeft mooiere effecten.

Andere varianten

Verder zijn er nog veel meer varianten. De meeste lijken erg op mekaar en de verschillen zitten hem voornamelijk in de JavaScript library die gebruikt wordt en de extra mogelijkheden (bijvoorbeeld tekst of flash weergeven).
Bedenk voor jezelf hoe je het wilt gebruiken en kijk vervolgens goed naar welke JavaScript libraries er al gebruikt worden. Een handig overzicht kan je vervolgen hier vinden.

Gebruik je WordPress? Maak dan gebruik de WordPress lightbox plugin. Maak je gebruik van Drupal? Maak dan gebruik van de Drupal lightbox plugin.

Nadelen van Lightbox:

De nadelen van lightbox zijn:

• Vereist gebruik van JavaScipt
• Effecten zijn mooi, maar kunnen onhandig zijn.
• Wanneer de resolutie van een afbeelding groter is als het scherm, valt de “Lightbox” buiten het scherm, waardoor het onhandig werkt voor een bezoeker.

Wanneer gebruik maken van Lightbox?

Lightbox is primair ontwikkeld om afbeeldingen groter weer te geven zonder een nieuw venster te laten openen. In mijn ogen is het daarom ook niet verstandig om het snel voor andere zaken te gebruiken. Effectjes zijn mooi en de eerste keer voor bezoekers ook leuk. Zijn er teveel effecten in je website verwerkt wordt dit al snel als vervelend en irritant ervaren door een bezoeker, die is hier meestal niet naar op zoek. Daarnaast is het ook niet toegankelijk. Browsers op mobiele telefoons kunnen er bijvoorbeeld niet mee omgaan. Hou het gebruik van effecten als Lightbox daarom altijd beperkt.

Lightbox kan wel goed gebruikt worden in:

• Een PhotoBlog
• Foto albums
• Het gedetailleerd weergeven van producten

Tot slot

Wat vind jij van mijn eerste bijdrage? Kennen je nog varianten op lightbox en wat is jouw ervaring hiermee? Wanneer zou jij lightbox wel gebruiken? Ken je nog slechte voorbeelden? Laat het horen in de comments!

• Tweet