Voor een groot deel van onze websites installeren we de door Occhio ontwikkelde PhotoPresenter zodat de beheerder website gemakkelijk fotoalbums kan toevoegen, ordenen en onderhouden. Wat content management betreft een standaard-oplossing die voor veel doeleinden ingezet kan worden: de beheerder maakt fotoalbums aan en kan per fotoalbum weer foto’s toevoegen. Dit kan per foto of met een groot aantal foto’s tegelijk, door een zip-bestand te uploaden.
Wat het tonen van de fotoalbums op de website (de front-end) betreft, doen wij juist ons best nooit met een standaard-oplossing te komen. De albums en hun foto’s kunnen namelijk op talloze manieren weergegeven worden: met thumbnails, vergrotingen, animaties, popupvensters*, of filmstrips; inmiddels is er een compleet arsenaal aan photogalleries beschikbaar. Tijd om er een aantal onder elkaar te zetten.
Alle in dit overzicht getoonde voorbeelden linken door naar een werkende toepassing.
1. Het alles-in-één overzicht
Waarschijnlijk één van de eerste photogalleries op het web. Alle foto’s van het album worden in thumbnailformaat weergegeven zodat ze in één oogopslag te bekijken en te beklikken (het zou een woord moeten zijn) zijn. Na een klik op een thumbnail wordt de grote versie boven (of onder, of naast) het thumbnailoverzicht weergegeven.
Het alles-in-één overzicht op de Heren 5 website (ontwerp door beukers scholma)
2. De filmstrip
Een variant op het alles-in-één overzicht. Het principe blijft hetzelfde: je ziet een aantal thumbnails en na klikken verschijnt de grote versie op de pagina. Je ziet echter niet alle thumbnails in een album tegelijkertijd, maar ze komen voorbij in een horizontale “filmstrip”. Het grote voordeel hiervan is dat je photogallery in zijn geheel altijd dezelfde afmetingen heeft, ongeacht hoeveel foto’s er in een album zitten. Waar het thumbnailoverzicht van de alles-in-één optie in sommige gevallen ontzettend groot kan worden, hoef je met de filmstrip nooit bang te zijn dat de layout van je pagina de dupe is van variërende albumgroottes. Het nadeel van deze variant is natuurlijk dat je nergens je totale thumbnailoverzicht in één oogopslag kunt bekijken. Het ligt dan natuurlijk vaak aan de aard van de website en de fotoalbums welke voor- en nadelen het zwaarst wegen.
Op de Zuiderzeemuseum website vinden we een mooi voorbeeld van de Filmstrip Photogallery: alle foto’s die bezoekers op hun Hyves-pagina toevoegen en taggen met het kernwoord “zuiderzeemuseum” komen automatisch in de photogallery op de website. Dit inclusief bijschrift en kudos voor de fotograaf.
3. De Lightbox
De Lightbox, uitgevonden door programmeur Lokesh Dhakar, was lange tijd veruit de meest populaire variant. Na een klik op een thumbnailversie van een foto verschijnt er een nieuwe laag over de website, waarop de grote versie van de foto weer in een nog hoger liggende laag wordt getoond. Duidelijk? Niet echt he? Precies hierom is een afbeelding vaak sterker dan duizend woorden:
De lightbox op de website van CODART
Het belangrijkste voordeel van de Lightbox is absoluut dat je de grootte van een beeldscherm maximaal kunt benutten. Door de afbeelding als het ware over de website heen te leggen, hoef je geen rekening te houden met de layout van je pagina. De afbeelding is dus zo groot mogelijk weer te geven. En dit zonder een traditioneel popupvenster te gebruiken, die door het grootste deel van je bezoekers automatisch geblokkeerd worden. Daarnaast ziet de Lightbox er fraai uit, mede dankzij de animatiemogelijkheden die deze oplossing biedt.
4. De fade
Fotoalbums kunnen echter ook een ander doel hebben dan een overzicht van foto’s over een bepaald onderwerp bieden. Ook op een manier die de layout van de webpagina wat meer ondersteunt kan men prima gebruik maken van een photogallery. Denk bijvoorbeeld aan de header-afbeelding, die steeds via een animatie overgaat van de ene naar de andere foto. Deze animatie kan op veel manieren, maar zelf gaan we het vaakst voor de cross-fade. Als je niet oppast, doen veel andere animaties toch snel aan slechte Powerpoint-presentaties denken. En dat kunnen we natuurlijk niet hebben.
De header-afbeelding van de Stichting Musical Awards Website ondersteunt de layout. De afbeeldingen worden in willekeurige volgorde ingeladen en faden in elkaar over.
5. En de rest
En zo zijn er natuurlijk nog talloze andere oplossingen. Vaak een combinatie of variant op bovengenoemde voorbeelden, maar daardoor niet minder interessant. Occhio blijft de mogelijkheden en ontwikkelingen binnen dit onderwerp nauw volgen en verkennen, wat natuurlijk tot uiting zal komen in onze toekomstige projecten.
Wanneer je de Duitse taal meester bent, kun je voor het zover is dit vrij complete overzicht al vast eens bekijken, met 23 prachtige voorbeelden. Mocht je de Duitse taal links hebben laten liggen na de middelbare school: wees niet bang! Het gaat natuurlijk vooral om de afbeeldingen en de voorbeelden.
*Voor de technici: natuurlijk zijn de traditionele popupvensters hopeloos achterhaald en heb ik het hier puur over een popup-achtig grafisch effect met HTML-elementen. De popup-blocker mag netjes aan blijven staan.