De fancyBox

De Fancybox kan tegenwoordig ook als diashow gebruikt kan worden, maar oorspronkelijk was het bedoeld als lightbox. Dat is een doorzichtige zwarte laag over het scherm waarop dan een afbeelding of andere content getoond wordt. Door een klik op een element (meestal een plaatje), wordt dit vergroot weergegeven. Doordat de rest van het scherm verduisterd wordt, valt het vergrote element extra goed op. Met een klik op het kruisje rechtsboven sluit de Fancybox weer. Het plezierige van deze oplossing om content duidelijk te tonen, is dat de oorspronkelijk pagina geheel in takt wordt gelaten.

Hier http://fancyapps.com/fancybox/ staat uitgelegd hoe de fancybox geïnstalleerd moet worden.

Klik op het plaatje om de fancyBox te openen.

Voor de allersimpelste lightbox, dus zonder speciale effecten en slideshow, volstaat het volgende:

  • jQuery binnenladen.
  • Een stylesheet laden.
  • Een fancyBox JavaScriptfile
  • Het te highlighten element binnen <a>-tags opnemen, met class = 'fancybox'
  • De bekende jQuery startfunctie uitvoeren

fancyBox aanpassen

De makers van fancyBox zijn zo vriendelijk geweest om de code geheel openbaar te maken en daarbij geven ze ook nog eens een uitvoerige beschrijving over hoe je fancyBox aan je eigen eisen kunt aanpassen. Dat kan op twee manieren: Je kunt in het eigenlijk JavaScript-file de default instellingen aanpassen of je kunt tussen de haakjes van de opstartfunctie, $(".fancybox").fancybox(), de nodige naam-waardeparen meegeven. Zo kan je bijvoorbeeld de fancyBox laten sluiten door een klik op het scherm i.p.v. op het kruisje:
$(".fancybox").fancybox({'closeBtn' : false,'closeClick' : true});
De tweede methode verdient de voorkeur omdat het dan veel inzichtelijker is wat je aangepast hebt. Bovendien is het heel moeilijk om het JavaScriptbestand dat daadwerkelijk gebruikt wordt (jquery.fancybox.pack.js) aan te passen omdat het gecomprimeerd is. Je kunt de ongecomprimeerde versie (jquery.fancybox.js) gebruiken om de juiste plaats op te zoeken. Heel sympathiek ook weer van de makers om in het pakket een origineel leesbaar bronfile op te nemen.