jQuery Lightbox Voorbeelden

Er zijn een hoop manieren om je foto's mooi te presenteren. In veel gevallen wordt er gebruik gemaakt van een zogenaamde Lightbox. Dit is een soort popup binnen in het browser scherm waarin de foto wordt getoond, en waarbij ook verder geklikt kan worden. Inmiddels zijn er tientallen verschillende ligtboxen beschikbaar, de ene nog mooier en uitgebreider dan de andere. Zo is het bijvoorbeeld mogelijk om externe content in te laden, of om flash video's te tonen. In dit artikel laat ik een overzicht zien van een aantal verschillende lightboxen.

jQuery Fancybox

De jQuery Fancybox is een lightbox die, zoals de naam al doet vermoeden, er erg goed uitziet. Dit begint al vanaf het moment dat er op de afbeelding geklikt wordt. Er komt geen normale lightbox, maar de afbeelding schuift als het ware naar het midden, en wordt groter. Ook bied deze lightbox de mogelijkheid om tussen de verschillende afbeeldingen te schakelen door middel van scrollen. Ook zijn er mogelijkheden tot het tonen van bijvoorbeeld Flash of Ajax content.

Website ontwikkelaar

jQuery Lightbox

Dit is een jQuery variant van de originele lightbox, maar dan met jQuery als achterliggende bibliotheek. Het origineel is gemaakt met Prototype. Ook deze variant biedt enkel de mogelijkheid tot het tonen van afbeeldingen.

Website ontwikkelaar

jQuery Nyromodal

Deze lightbox bied een ruime keuze aan mogelijkheden. Zo kan er een pagina via Ajax ingeladen worden, kunnen er Youtube filmpjes in afgespeeld worden en kunnen er iFrame's mee ingeladen worden. Ook is deze in een straks design gestoken waardoor deze lightbox er strak uitziet.

Website ontwikkelaar

Pirobox

De Pirobox is een mooie, maar lastig te plaatsen lightbox. Wanneer er een gallery getoond moet worden, moet er een rel="gallery" worden meegegeven. Verander je deze naam, dan zal de ligtbox wel laden, maar wordt de afbeelding helemaal niet getoond. Dit uitzoeken is het wachten wel waard, je zult beloond worden met een mooie lightbox.

Website ontwikkelaar

Prettyphoto

De Prettyphoto is een van mijn favorieten. Deze werkt lekker simpel, en ziet er goed uit. Zo is het bijvoorbeeld mogelijk om in de lightbox thumbnails te tonen van de afbeelding dit nog gaan komen. Ook biedt deze lightbox de optie om een foto tot de maximum grootte van het beeldscherm te vergroten, en wanneer de bezoeker dat wilt de foto op volle grootte te laten zien. Kortom: een lightbox met erg veel mogelijkheden.

Website ontwikkelaar

Niet genoeg keuze?

Met behulp van Google zijn er nog genoeg alternatieven te vinden. Zo staan er hier 10 voorbeelden, hier 20 en op deze pagina kun je 30 verschillende lightboxen vinden.

Ook zijn er voor andere frameworks genoeg lightboxen te vinden. Hier kun je voorbeelden voor MooTools vinden, en hier kun je een aantal voorbeelden voor Prototype vinden.

Nog steeds niet genoeg keuze?

Het is ook heel goed mogelijk om zelf een lightbox te maken. In deze tutorial wordt duidelijk gemaakt hoe je zelf een lightbox kunt maken. Deze kun je dan helemaal aan je eigen wensen aanpassen.