Website - Afbeeldingen geanimeerd tonen met Lightbox


Het is vaak mooi om van bepaalde foto's een vergroting te kunnen tonen, bijvoorbeeld in een Popup. Je hebt dan een kleine afbeelding op de pagina (thumbnail) en door op de afbeelding te klikken komt de foto tevoorschijn in een popup of op een aparte pagina.

Nu zijn er genoeg alternatieve manieren te vinden om foto's te tonen in plaats van in een popup. En van die manieren is met behulp van Lightbox. Je hebt dan ook een kleine versie van de foto op een pagina staan. Als je hierop klikt verschijnt met behulp van Lightbox de foto op de pagina zelf over de website heen.

Het script legt een laag over de website heen en maakt een vak wat zich automatisch aanpast aan de afmetingen van de foto. Een voorbeeld zie je hieronder.

Voorbeeld Lightbox

Lightbox

Het implementeren van Lightbox is eenvoudig en gaat als volgt. Het totale script bestaat uit 4 Javascript bestanden, 1 CSS bestand plus een aantal afbeeldingen. Deze download je allemaal middels de onderstaande link (ZIP-bestand).

Na het uitpakken zie je drie mappen genaamd: css, images en js.

In de map CSS staat 1 bestand:

  • lightbox.css

In de map JS staan 4 bestanden:

  • prototype.js
  • scriptaculous.js
  • lightbox.js
  • effects.js

En daarnaast is er nog een map met afbeeldingen genaamd images.

Gebruiken

De drie mappen bevatten de bestanden die nodig zijn voor het draaien van het script, plaats deze 3 mappen eerst op je website. Vervolgens moeten de bestanden aangeroepen worden in de pagina of pagina's waar je het script wilt gebruiken.

Als eerste de javascript bestanden. De onderstaande vermeldingen plaats je in het <head> gedeelte van je website, zorg dat de paden naar de bestanden kloppen.

<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>


Dan is er het CSS bestand voor opmaak. Deze moet ook aangeroepen worden het <head> gedeelte van je website, zorg ook weer dat het pad klopt.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


Het laatste dat moet gebeuren is de juiste link (<a href=...) plaatsen. De link is een grotendeels een link zoals die je normaal zou plaatsen maar met een kleine toevoeging.

De code van de link is als volgt:

<a href="fotomap/foto1.jpg" rel="lightbox" title="begeleidende tekst">Bekijk de foto</a>


Achter "href" komt het pad naar de grotere foto. Dan zie je in de link een gedeelte dat begint met "title=". Hetgeen wat je hier invult komt te staan onder de foto als onderschrift zoals te zien is in het voorbeeld bovenaan deze pagina.

Dan werkt het script, pas eventueel de opmaak of de afbeeldingen aan naar wens.

Lightbox Roadtrip

Een aanvullende optie van Lightbox is om foto's te groeperen. Dit houdt in dat als je meerdere foto's hebt je eenvoudig door alle foto's, binnen het geopende Lightbox venster kunt bladeren met de pijlen die links en rechts worden geplaatst.

Veel hoef je hiervoor niet te doen, het gaat om slechts een kleine wijziging. Het gedeelte rel="lightbox" in de code moet dan gewijzigd worden in rel="lightbox[roadtrip]".

<a href="fotomap/foto1.jpg" rel="lightbox[roadtrip]" title="begeleidende tekst">Bekijk de foto</a>


Een voorbeeld hieronder, klik op de eerste foto en ga daarna met je muis rechts over de foto. Er verschijnt dan een knop 'next' in beeld om verder te bladeren.

Voorbeeld Lightbox Roadtrip Voorbeeld Lightbox Roadtrip Voorbeeld Lightbox Roadtrip Voorbeeld Lightbox Roadtrip

Links

Eventueel handig om te weten is dat er in 'caption' ook een link kan worden geplaatst. In dat geval moet de code omgezet worden zoals hieronder in het voorbeeld.

<a href="fotomap/foto1.jpg" rel="lightbox[roadtrip]" title="&lt;a target=&quot;_blank&quot; href=&quot;http://www.websonic.nl&quot;&gt;Link&lt;/a&gt;">Bekijk de foto</a>


Voorbeeld Lightbox