Hier wordt de voorbereidingen getroffen. Met PhotoShop worden de afbeeldingen voor de lightbox fotogalerij op maat gemaakt. Behalve te showen afbeeldingen zijn er ook thumbnails nodig. Zo worden voor het gemak allebei onder dezelfde naam in een map opgeslagen. De thumbnails in een apart mapje zodat je dezelfe bstandsnamen kunt blijven hanteren.
In deze video worden de thumbnails in de webpagina geplaatst. Eerst wordt in Dreamweaver de site gedefinieerd.
Nadat de webpagina is opgeslagen, kun je de thumbs op eenvoudige wijze plaatsen in het document.
Vervolgens wordt elke thumbnail gekoppeld aan de bijpassende vergrote afbeelding.
Hier blijkt het voordeel van een doordachte naamgeving van de afbeeldingen. Bedenk dus dat een fotogalerij erg veel afbeeldingen bevat.
We bezoeken de site http://lokeshdhakar.com/projects/lightbox2/ om lightbox 2 te downloaden.
De overtollige bestanden worden verwijderd. Let wel op de uiteindelijke structuur van de mappen.
Lightbox2 wordt vergezeld van een stijlblad lightbox.css, die gekoppeld wordt aan de html-pagina.
Ook de javascriptbestanden van jquery en lightbox.js worden gekoppeld.
Hierbij moet het jquery-script beslist voorafgaan aan het lightbox-script.
Daarna wordt aan de de link in het html-document het argument rel="lightbox" toegevoegd.
Wil je dat een serie afbeeldingen in de ligthbox naar elkaar kunnen overgaan, dan moet dit attribuut nog worden uitgebreid: rel="lightbox[onderwerp]".
De afbeeldingen worden dan ook nog voorzien van een Engelstalig onderschrift dat aangeeft welke afbeelding van de reeks in beeld is.
Deze Engelstalige tekst is in de opties van lightbox.js aan te passen naar Hollandse termen.
Tot slot kun je in de linkst van de lightbox ook nog een derde attribuut toevoegen: title="een omschrijving" levert nog een eigen omschrijving bij de getoonde afbeeldingen.