Lightbox tutorial: foto's en plaatjes presenteren
Het tonen van foto's op een website brengt vaak de nodige problemen met zich mee. Het plaatsen van meerdere grote foto's in hoge resolutie zorgt meestal voor een te onoverzichtelijke pagina die bovendien zo een paar megabyte groot is. Daarom is het plaatsen van thumbnails een goede oplossing. Deze kleine versies van de foto's geven bezoekers een goed idee van de foto en als de bezoeker meer details wil zien dan klikt hij op de foto om een grotere versie te zien.
Het tonen van de grote foto kan door er gewoon in de thumbnail naar te linken. Bijvoorbeeld:
<a href="fotonaam.jpg" ><img src="foto-thumbnail.jpg" width="150" height="100" alt="" /></a>
Dat werkt op zich prima. Het nadeel is wel dat de bezoeker naar een nieuwe pagina wordt geleid. Hier is echter een oplossing voor. Je kunt op vrij eenvoudige wijze een grote versie van een foto tonen zonder dat de bezoeker de pagina verlaat. Dit kan door een paar JavaScripts te gebruiken die op het web bekend staan als Lightbox.
In deze Lightbox tutorial gaan we bekijken hoe je Lightbox 2 gebruikt om foto's en plaatjes te presenteren.
1. Lightbox downloaden
Er zijn meerdere Lightbox scipts beschikbaar op het web. In dit artikel gebruiken we Lightbox 2 die te krijgen is op lokeshdhakar.com. Dit script werkt in de moderne browsers en is makkelijk te implementeren. Klik op de link en download de Lightbox bestanden (stukje naar beneden scrollen op die pagina).
Pak de bestanden uit in een map op je computer.
2. Verwijzen naar JavaScripts in de header
Nu gaan we naar de pagina waarop je Lightbox wilt gebruiken. Ik ga er vanuit dat je de thumbnails van de foto's of plaatjes al in de code van je pagina hebt staan.
Plaats de volgende verwijzingen naar de JavaScripts in het <head> gedeelte van de pagina (code dus voor de </head> tag plaatsen!):
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
3. Verwijzen naar CSS code in de header
Ook moeten we nog verwijzen naar het CSS bestand van Lightbox 2 in het <head> gedeelte:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
4. Locatie van de bestanden controleren
Waarschijnlijk staat dit standaard goed, maar als je straks je pagina gaat uploaden en er werkt iets niet dan is er een grote kans dat je niet naar de juiste map verwijst in deze bestanden.
Controleer het lightbox.css bestand (in de css map) en kijk of naar de juiste locatie van de bestanden prevlabel.gif en nextlabel.gif wordt verwezen.
Doe hetzelfde in het bestand lightbox.js voor de bestanden loading.gif, closelabel.gif en close.gif.
5. Lightbox activeren
Nu kunnen we Lightbox 2 activeren. Voeg de volgende code toe aan de link die je gebruikt om naar de grote foto te linken:
<a href="images/naamfoto.jpg" rel="lightbox" title="Titel van de foto">Foto 1</a>
Vervang naamfoto.jpg door de bestandsnaam en extensie van je eigen foto. Bij title kun je een titel voor de foto opgeven. Deze wordt onder de foto in Lightbox getoond.
Dat is alles. Je kunt nu je pagina opslaan en uploaden naar je webserver. De mappen css, images en js moet je ook uploaden. Let goed op dat je geen bestaande mappen hebt met dezelfde naam en dat je die niet overschrijft. In dat geval moet je even een nieuwe subdirectory aanmaken (bijvoorbeeld lightbox) en daar de mappen in plaatsen. Het bestand index.html hoef je ook niet te uploaden, want dat is een voorbeeldpagina. Let dus op dat je de index-pagina van je eigen site niet per ongeluk overschrijft.
Je kunt nu je pagina met de thumbnails laden en kijken of Lightbox werkt. Is dat niet het geval, dan is er vaak wat mis bij het verwijzen naar de locatie van de bestanden, zie stap 4. Controleer of alle verwijzingen naar de directories en bestanden kloppen.
6. Een set foto's
Erg handig is dat je Lightbox 2 ook kunt gebruiken voor een set foto's. Dit is een groepje gerelateerde foto's die je aan bezoekers wilt tonen. Je kunt foto's toevoegen aan een groep door ze een groepsnaam te geven in de code van de link. Dit doe je door de groepsnaam tussen vierkante haakjes te plaatsen in het rel attribuut van de link.
Bijvoorbeeld: deze drie foto's hebben de groepsnaam "vakantie" en vormen samen een set:
<a href="images/naamfoto1.jpg" rel="lightbox[vakantie]">Foto 1</a>
<a href="images/naamfoto2.jpg" rel="lightbox[vakantie]">Foto 2</a>
<a href="images/naamfoto3.jpg" rel="lightbox[vakantie]">Foto 3</a>
Ook hier kun je natuurlijk weer een title toevoegen, zodat je foto's een onderschrift hebben in Lightbox. Doordat deze foto's nu deel uitmaken van een groep, kun je naar de volgende foto's bladeren door met de muiscursor op het plaatje te gaan staan en aan de rechterkant op "Next" te klikken. Ook kun je de pijltjestoetsen gebruiken om voor- of achteruit te bladeren in de foto's.
Een voorbeeldpagina van Lightbox 2
Om alles duidelijker te maken heb ik een voorbeeldpagina gemaakt waar Lightbox op gebruikt wordt (opent in nieuw venster).
Je ziet bovenaan hoe je Lightbox voor enkele foto's kunt gebruiken en daaronder een voorbeeld van een set van drie foto's. Kijk in de bron van de voorbeeldpagina om te zien hoe de code er uitziet. Als je problemen tegenkomt bij het implementeren van de codes op je eigen pagina dan kun je hier hopelijk zien wat er mis is gegaan.
Conclusie
Het gebruik van Lightbox 2 geeft je de mogelijkheid om foto's en plaatjes op een mooie manier te presenteren aan je bezoekers. Grote afbeeldingen kunnen op dezelfde pagina getoond worden als de thumbnails en Lightbox is bovendien makkelijk in pagina's te verwerken. Een pluspunt is bovendien dat wanneer Lightbox niet ondersteund wordt door een (oude) browser dat dan gewoon de standaardlink gebruikt wordt, waardoor de bezoeker de afbeelding te zien krijgt op een nieuwe pagina.
Wat vond je van dit artikel?
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
