Lightbox 2.04

Vandaag gewerkt met "Lightbox 2.04". Dit is een toepassing die is bedoeld om binnen een (HTML)webpagina op een professionele wijze foto's weer te geven. Vrij simpel:

1. Download lightbox = een map met bestanden: images (bevatten de foto's), js, css en een HTML file als voorbeeld. ( zie: http://www.huddletogether.com/projects/lightbox2/ )


2. Open de HTML file en volgt de instructies.


3. 
   
   Open 'beeld' en vervolgens 'paginabron' om achter de HTML site te kijken hoe actionscript moet worden geplaatst binnen HTML pagina van de eigen site.
   
   Dit betekent dat de volgende scripts binnen de "head" van de site geplaatst moeten worden:

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


<script src="js/prototype.js" type="text/javascript"></script>


<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>


<script src="js/lightbox.js" type="text/javascript"></script>

1. Plaats (upload) de js en css en images mappen in de map waarin de te bewerken website zich bevind.


2. 
   
   Kopieer de link(en) uit de voorbeeld HTML naar de pagina waar de foto's geplaatst moeten worden.
   
   Dit betekent dat de volgende linken geplakt moeten worden (binnen de HTML code) op de plaats waar de foto's vertoond moeten worden:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

1. Pas deze linken aan zodat ze verwijzen naar foto's die werkelijk in de "images" map bevinden van de te bewerken site.


2. "insert" een thumb van de te bekijken foto's binnen de geplaatste linken op de plaats waar nu >image #1< staat of: bewerk deze tekst zodat ze logisch verwijzen naar de te vertonen foto.

Lightbox is een kadootje voor elke webmaster. Volg gewoon de algemene logica van het webbouwen (= zorg ervoor dat alle linken verwijzen naar hetgeen jij wilt laten zien) en je website krijgt direct een vrij professionele uitstraling. Vergeet niet om de illustraties uit de map 'images' zoals je die aantreft in de lightbox map te uploaden naar de images map van je website. In deze map zitten een paar iconen die worden weergegeven via de geuploadde scripts. Daar bevindt zich bijvoorbeeld het icoontje 'close' dat wordt weergegeven bij het openen van een illustratie is lightbox zodat de bezoeker weet waar te klikken om de illustratie weer te laten verdwijnen.

Voor meer info stuur mij even een mailtje,

Meindert A. Jorna

Spidermanwebdesign@gmail.com

Kijk ook eens op:

www.spiderman-webdesign.nl

of:

www.dewebmeester.nl