Je foto’s vergroten met een pop-up die als overlay over je huidige pagina verschijnt. Dat kan met een zogenaamde lightbox, die je vaak tegenkomt in fotogalerijen en op fotosites. Op deze pagina leer je om zelf een lightbox op je website te installeren en gebruiken.
Er zijn diverse scripts gratis beschikbaar waarmee je je eigen lightbox kunt gebruiken op je website. Een van de betere is Lightbox 2, gemaakt door de in de VS woonachtige webdesigner Lokesh Dhakar. Het script is heel gemakkelijk in gebruik. Je hoeft het enkel maar naar je eigen webserver te kopiëren en de scripts in je header van je webpagina in te voegen. Hierna kun je elke foto op je website voortaan door bezoekers laten vergroten met een fraai lightbox-effect.
Stap 1
Download de broncode van Lightbox 2. Dat kun je hier op de site van de maker doen, of van zelf-een-site-maken.nl, waar ik een kopie van het bestand heb neergezet. Open dit zip-bestand en kopieer de inhoud (de map lightbox) naar een nieuwe map op je computer. Open nu het bestand lightbox.css in de map css in de map lightbox met een HTML-editor of met Kladblok. Zoek de regels op waarin de prev.png en de next.png worden aangeduid. Verander die zo dat ze er als volgt uit komen te zien (waarbij je ‘jedomeinnaam’ uiteraard vervangt door je eigen domeinnaam:
/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(https://www.jedomeinnaam.nl/lightbox/images/prev.png) left 48% no-repeat;
}
/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
background: url(https://www.jedomeinnaam.nl/lightbox/images/next.png) right 48% no-repeat;
}
Open nu het bestand lightbox.js in de map js en zoek de regels op waarin dit staat:
this.fileLoadingImage = 'images/loading.gif'; this.fileCloseImage = 'images/close.png';
Zet voor ‘images’ weer de volledige naam van je domein en de map lightbox:
this.fileLoadingImage = 'http://www.jedomeinnaam.nl/lightbox/images/loading.gif'; this.fileCloseImage = 'http://www.jedomeinnaam.nl/lightbox/images/close.png';
Stap 2
Open je FTP-programma en verbind met je webserver. Kopieer nu de map ‘lightbox’ die je net aangemaakt hebt naar de hoofdmap van je website. Je krijgt dan als het goed is zoiets als www.jedomeinnaam.nl/lightbox/.
Stap 3
In de map lightbox die je net naar je server hebt gekopieerd zitten de CSS- en JavaScript-bestanden die je nodig hebt. Je dient deze in de header van je website op te nemen (tussen de <head></head> tags).
Dat doe je met de volgende code:
<script src="https://www.jedomeinnaam.nl/lightbox/js/jquery-1.7.2.min.js"></script> <script src="https://www.jedomeinnaam.nl/lightbox/js/lightbox.js"></script> <link href="http://www.jedomeinnaam.nl/lightbox/css/lightbox.css" rel="stylesheet" />
Met de eerste twee regels voeg je de JavaScript-bestanden toe, met de laatste wordt het CSS-bestand ingevoegd. Wanneer je overigens al gebruik maakt van JQuery voor andere effecten op je webpagina, moet je niet nogmaals de JQuery invoegen, je kunt dan de eerste regel weglaten.
Stap 4
De laatste stap is om een stukje code aan je afbeeldingen toe te voegen. Je hebt daarvoor een grote versie van je afbeelding en een kleine versie nodig. De kleine voeg je op je pagina toe zoals je altijd zou doen, bijvoorbeeld met de volgende code:
<img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1.jpg" />
Je moet hier vervolgens een link van maken naar de grote versie van de afbeelding, zodat als mensen erop klikken ze bij de grote afbeelding uitkomen:
<a href="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1_big.jpg"><img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1.jpg" /></a>
Als je de link uitprobeert zul je zien dat je nu bij de grote uitkomt, maar nog niet in een lightbox. Daarvoor moet je nog een ding toevoegen:
<a href="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1_big.jpg" rel="lightbox"><img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1.jpg" /></a>
Met ‘rel=lightbox’ geef je aan dat voor deze afbeelding de lightbox gebruikt moet worden.
Dat was alles, hiermee heb je een lightbox aan je pagina toegevoegd. Het resultaat ziet er zo uit:
Wil je meerdere afbeeldingen gebruiken en kunnen bladeren in de lightbox zelf, dan biedt dit script daar ook de mogelijkheid toe. Het enige wat je dan moet doen is iets veranderen aan de rel-code. Ook is het mogelijk een onderschrift toe te voegen. Dat doe je eenvoudig door in de link een title-attribuut mee te geven.
<a href="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1_big.jpg" title="Dit is afbeelding 1" rel="lightbox[frankrijk]"><img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1.jpg" /></a> <a href="https://www.zelf-een-site-maken.nl/slideshow/frankrijk2_big.jpg" title="Dit is afbeelding 2" rel="lightbox[frankrijk]"><img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk2.jpg" /></a>
Je geeft met rel=”lightbox[frankrijk]” aan dat de beide afbeeldingen bij elkaar horen. De uitwerking hiervan ziet er als volgt uit.
