Ik heb dit artikel gevonden over Lightbox.
Ik ben niet zo'n held in websites maken maar wil er toch een mooie fotopagina in maken.
Kan iemand me zeggen of deze informatie heden ten dagen nog wel klopt want het artikel is uit 2004.
Je wilt je fotoalbum niet openen in een popup of andere pagina of je wilt gewoon een gelikte manier hebben om je foto's te laten zien? Met Lightbox maak je een fotoalbum dat er niet alleen geweldig uitziet, het is ook nog eens superfunctioneel.
Als je nu al een fotoalbum hebt, herken je waarschijnlijk het volgende: Je foto's zijn groter dan je contentvlak, dus heb je thumbnails gemaakt. Zodra je bezoekers erop klikken wordt in een popup of in een andere pagina de grote versie getoond. Dit werkt weliswaar goed, maar het blijft openen, terug, openen, sluiten... Minder praktisch dus.
Het mooie van Lightbox is dat je foto's over je website geplaatst worden, wat ervoor zorgt dat je een mooi geheel met je website creëert. Je website hoeft op deze manier ook niet verlaten te worden om grotere foto's te bekijken en dus worden je albums niet geblokkeerd door een pop-up blocker.
Wil je weten wat ik precies bedoel en hoe het eruit ziet? Klik dan hier voor een voorbeeld.
Dat wil ik ook!
Waarschijnlijk is dat je eerste reactie, dat was de mijne in ieder geval wel!
Laten we dan ook maar meteen beginnen met het downloaden van de techniek achter Lightbox. Klik hier om Lightbox 2.0 te downloaden.In het bestand vind je een Engelstalige uitleg, in dit artikel zal ik de Nederlandse vertaling plaatsen.
1. Javascripts
Lightbox 2.0 maakt gebruik van 'Prototype Framework' en 'Scriptaculous Effects Library'. Om hier gebruik van te maken moet je de volgende regels toevoegen tussen < head > en < /head > van de betreffende html-pagina.
<script type="text/javascript"
src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects"></script>
De bestanden staan in het mapje 'js', zorg dat je ze ook zo uploadt naar je server.
2. Stylesheet
Voeg vervolgens de meegeleverde stylesheet toe door de volgende regel te plaatsen:
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />
De stylesheet staat in het mapje 'css', upload deze map naar je server.
3. Afbeeldingen uploaden
In de map 'images' bevinden zich de afbeeldingen voor de visuele stijl van LightBox 2.0. Deze kun je eventueel bewerken, zorg ervoor dat je de namen ongewijzigd laat. Upload vervolgens de hele images-map naar je server.
4. Afbeelding activeren
We gaan nu je afbeeldingen laten werken met LightBox. Klik op een afbeelding, in het voorbeeld noemen we de geselecteerde afbeelding thumb-1.jpg. Dit wordt een link naar de grotere versie: image-1.jpg. Deze wordt geopend zodra je klikt op thumb-1.jpg.
Voeg het volgende toe aan je afbeelding:
<a href="images/image-1.jpg" rel="lightbox">
Plaats erachter:
</a>
Je krijgt dan dus:
<a href="images/image-1.jpg" rel="lightbox"><img
src="images/thumb-1.jpg"></a>
5. Album
Wil je meerdere afbeeldingen groeperen, zodat je 'volgende' en 'vorige' kunt kiezen, dan moet je bij rel="lightbox" de groepsnaam tussen rechte haakjes plaatsen: [groepsnaam]. De code wordt dan bijvoorbeeld:
<a href="images/image-1.jpg" rel="lightbox[groepsnaam]"><img
src="images/thumb-1.jpg"></a>
<a href="images/image-2.jpg" rel="lightbox[groepsnaam]"><img
src="images/thumb-2.jpg"></a>
<a href="images/image-3.jpg" rel="lightbox[groepsnaam]"><img
src="images/thumb-3.jpg"></a>
[groepsnaam] mag een willekeurige naam zijn, houd het overzichtelijk. Zorg ervoor dat de groepsnaam tussen de aanhalingstekens staat. Dus niet rel="lightbox"[groepsnaam] maar rel="lightbox[groepsnaam]"
6. Beschrijving
Wil je ook een beschrijving onder elke foto tonen, voeg dan aan je link het volgende stukje code toe:
title="de beschrijving van je foto"
Je krijgt dan dus:
<a href="images/image-1.jpg" rel="lightbox[groepsnaam]" title=" de
beschrijving van je foto"><img
src="images/thumb-1.jpg"></a>
Als je nu het html-bestand uploadt en online op de afbeeldingen klikt, zul je LightBox in werking zien op je eigen website.
Veel succes!
P.S. Je kunt ook kiezen voor een uitvoering die iets eenvoudiger is, maar die daardoor wel minder mogelijkheden heeft. Klik hier om naar deze versie te gaan.
groetjes Mieke
