Grote foto's op een webpagina

Het tonen van grote foto's in hoge resolutie op een website levert vaak problemen op. Het zorgt meestal voor een onoverzichtelijke pagina die bovendien een paar megabyte groot is. Het is vaak beter en mooier om van bepaalde foto's een vergroting aan te bieden in een apart venster. Er staat dan een kleine afbeelding op de pagina (thumbnail), door op die afbeelding te klikken komt de foto tevoorschijn in een popup of op een aparte pagina. De kleine versie geeft bezoekers een goed idee van de foto. Als die meer details willen zien, dan klikken ze op de thumbnail en zien dan een grotere versie van de foto.

Het tonen van de grote foto door op de thumbnail te klikken, kan als volgt:

<a href="fotonaam.jpg" ><img src="foto-thumbnail.jpg" width="150" height="100" alt="" /></a>

Dat werkt goed. Maar er is een nadeel. De bezoeker wordt naar een nieuwe pagina geleid. Daar is echter een oplossing voor. Je kunt een grote versie van een foto tonen zonder dat de bezoeker de pagina verlaat. Daarvoor gebruik je een paar JavaScripts die op het web bekend staan als Lightbox, Shadowbox of FancyBox.

Lightbox, Shadowbox, FancyBox of Slimbox

Lightbox

Eén manier om foto's te tonen binnen de pagina waar een bezoeker zich bevindt, is met behulp van Lightbox dat te krijgen is op lokeshdhakar.com. De bezoeker ziet een kleine versie van de foto op een pagina. Als hij daarop klikt, legt Lightbox een laag over de webpagina - een zogenaamde ‘overlay’ – en maakt daarin een vak dat zich automatisch aanpast aan de afmetingen van de foto. Die overlay is geen popup, want daaronder wordt over het algemeen een nieuw browservenster verstaan. Popups worden vaak voor reclames gebruikt, vandaar dat veel mensen popupblockers installeren zodat ze de reclame niet te zien krijgen. Een gevolg is wel, dat fotoalbums die popups gebruiken niet goed werken.

Een voorbeeld van een overlay gemaakt met Lightbox zie je hieronder, klik op de thumbnail aardwarmte.png om te zien wat er gebeurt. lightbox_test/aardwarmte.jpg

Met Lightbox, Shadowbox en Fancybox kun je ook foto's groeperen. Dat houdt in dat je binnen het geopende popup-venster met de geplaatste pijlen door alle foto's kunt bladeren. Ook is het mogelijk een onderschrift toe te voegen.

Voorbeelden van zo'n groep gemaakt met Lightbox vind je hieronder. Klik op de eerste foto van de groep Kruiden of Frankrijk en ga daarna met je muis naar rechts over de foto. Er verschijnt dan een pijlpunt in beeld om verder te bladeren.

 

Kruiden

Voorbeeld Lightbox groep Kruiden Voorbeeld Lightbox groep Kruiden Voorbeeld Lightbox groep Kruiden Voorbeeld Lightbox groep Kruiden

 

Frankrijk

Voorbeeld Lightbox groep Frankrijk Voorbeeld Lightbox groep Frankrijk

 

Shadowbox

Een vergelijkbaar instrument is shadowbox.js. Op de site waar je dit instrument kunt downloaden, staat ook een gebruiksaanwijzing (Engels). De volgende twee groepen foto's zijn gemaakt met Shadowbox. De pijl om naar een andere foto te gaan vind je rechts onder in het venster.

Voorbeeld Shadowbox groep apart Voorbeeld Shadowbox groep apart Voorbeeld Shadowbox groep apart

 

Voorbeeld Shadowbox groep Voorbeeld Shadowbox groep Voorbeeld Shadowbox groep Voorbeeld Shadowbox groep

 

FancyBox

Ook FancyBox is een instrument om afbeeldingen op het scherm te zetten. Op de site waar u dit instrument kunt downloaden, staat ook een gebruiksaanwijzing (Engels). Fancybox doet hetzelfde als Lightbox en Shadowbox. Ook Fancybox maakt een zogenaamde ‘overlay’, een soort laagje over de pagina.

Eenvoudige fotogalerij

Bladeren met knoppen

Bladeren met de Thumbnails

Open foto's met tekstkoppelingen

Bladeren door een groep
example1 example2 example3 example4

Bladeren door een fotoalbum

 

 

Slimbox 2

Ook Slimbox 2 is een script waarmee afbeeldingen kunnen worden getoond / vergroot in een fancy overlay blok. Dankzij deze techniek kunnen bezoekers eenvoudig afbeeldingen vergroten en hier doorheen navigeren. Ontwikkelaar Christophe Beyls uit België heeft Slimbox 2 gebaseerd op het bekende Lightbox script van Lokesh Dhakar uit Baltimore.