Binnen website’s spelen foto’s vaak een centrale rol. Echter kunnen ze vaak niet in hun totaalbeeld geplaatst worden omdat ze teveel ruimte innemen. Een handig middeltje om dit op te lossen is Lightbox.
Wat doet Lightbox?
Via het javascript van Lightbox wordt op de website maar een klein afbeeldingtje getoond in plaats van de normale foto. Wanneer vervolgens een bezoeker benieuwd is naar de foto, kan deze vergroot worden door er op te klikken. Het script legt in principe een laag over de website heen en maakt een eigen vak wat zich aanpast aan de grootte van de foto.
De stappen:
1. Download het script via http://www.websonic.nl/tutorials/website/lightbox/lightbox.zip. Pak vervolgens de bestanden uit, zowel de 4 javascript-bestanden als het css-bestand en de afbeeldingen.
Normaal zie je dan alsvolgt:
In de map CSS staat 1 bestand genaamd,
- lightbox.css
In de map JS staan 4 bestanden,
- prototype.js
- scriptaculous.js
- lightbox.js
- effects.js
2. Plaats alle net gedownloade bestanden op de ftp.
3. Plaats tussen de <head> tags van de pagina’s waarop je de Lightbox wilt gebruiken het volgende:
<script src=”js/prototype.js“></script>
<script src=”js/scriptaculous.js?load=effects“></script>
<script src=”js/lightbox.js“></script>
Hiermee inegreren we de 3 java-bestanden voor de werking van het script.
4. Plaats vervolgens ook het volgende tussen de <head> tags.
<link rel=”stylesheet” href=”css/lightbox.css” media=”screen” />
Daarmee passen we de stijl en het uiterlijk van de Lightbox aan.
5. Na alle voorgaande bestanden, moet de foto ook op één of andere manier opgeroepen worden. Dit doen we via de volgende code:
<a href=”fotomap/foto1.jpg” rel=”lightbox” title=”begeleidende tekst”>Bekijk de foto</a>
Daarbij stelt foto1.jpg de foto voor die je graag in de Lightbox wenst, de ‘Bekijk de foto’ stelt de boodschap voor die bezoekers te zien krijgen voordat ze op de foto klikken.
6. Sla alle bestanden op en vervang de oude bestanden op de ftp door de nieuwe.
Het resultaat zal je website doen schitteren.
