Dynamisch fotos vergroten


Een online fotoboek, een gallerij met afbeeldingen ofzelfs je eigen collectie van pronafbeeldingen. Allemaal werken ze volgens hetzelfde principe, je bezoekers of jij klikt op een van de verkleinde afbeeldingen en je wordt naar een nieuwe pagina gevoerd met de uiteindelijke afbeelding in groter formaat, al dan niet met de nodige rest van je pagina om je bezoekers het “je bent nog steeds hier” gevoel te geven.

Dat kan je veranderen

Waarom je server zodanig belasten voor telkens opnieuw een aparte pagina te laden voor elke foto/afbeelding ?

Laat je bezoekers op je pagina blijven, want uiteindelijk willen ze nu gewoon die foto zien, dus geef hen hun goesting.

Lightbox

Lightbox biedt je de manier om dit te doen, er bestaan welliswaar meerdere manieren en andere versies, maar laten we nu eens gewoon bij deze eenvoudige manier houden zonder al teveel bling bling.

Lightbox is een unobtrusive JavaScript dat je afbeeldingen bovenop de huidige pagina plaatst en werkt in alle moderne browsers, ja zelfs in Internet Explorer 6.

Handleiding

Het opzetten en gebruik is zeer eenvoudig:

  1. Download alle benodigde onderdelen Lightbox.zip 7,1 Kb ( )
  2. Plaats volgende code in je <head>:
    <script type="text/javascript" src="lightbox.js"></script>
  3. Voeg rel="lightbox" toe aan elke link waarvoor je wenst Lightbox te gebruiken:
    <a href="images/afbeelding.jpg" rel=”lightbox” title=”uitleg hier verschijnt in afbeelding”>afbeelding</a>
  4. Voeg de link naar lightbox.css toe in je <header> van je pagina:
    <link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
  5. Wens je gebruik te maken van de transparent zwarte achtergrond moet je de plaats waar de .PNG staat aanpassen in de lightbox.css:
    #overlay{ background-image: url(pad/naar_afbeelding/overlay.png); }
    Daar de transparent .PNG ook werkt met IE6 is de CSS niet valid en gebruikt een speciale filter enkel voor IE6, maar opgelet: De verwijzing naar de .PNG in de CSS voor IE6 moet ten opzichte zijn van webpagina naar afbeelding, niet ten opzichte zijn vanuit de CSS naar de afbeelding.
  6. Als je de loading afbeelding, alsook de afbeelding voor het sluiten wenst te gebruiken, pas dan het pad naar de afbeeldingen aan in lightbox.js:
    var loadingImage = 'loading.gif';
    var closeButton = 'close.gif';

Een voorbeeld

Een voorbeeld van het gebruik kan je op deze pagina zien.
Ik ben mij ervan op de hoogte dat Lightbox 2.0 bestaat maar heb deze bewust gekozen omwille van gemakkelijk opzet en gebruik, de versie 2 gebruikt ook prototype en scriptaculous, welke voor meerdere mogelijkheden zorgt weliswaar, maar men moet ergens beginnen met uitleggen hé ?