Shadowbox, one box to rule them all

Op het internet bestaan dozijnen aan scripts die afbeeldingen en andere media vertonen in een layer boven de content van een pagina. Het voordeel van deze scripts is duidelijk. Een object wordt als een thumbnail getoond en door erop te klikken wordt een floating layer vertoond met hierin een grotere versie. Daarnaast is het meestal ook mogelijk om image gallery's te maken waarmee je door verschillende afbeeldingen kan bladeren.

Twee van deze scripts zijn behoorlijk populair Thickbox en Lightbox. Maar beide scripts bevatten enkele problemen waardoor ze niet pefect zijn. Er bestaan nog vele andere scripts die bijna hetzelfde doen (vaak ook nog gebaseerd op een al bestaand script).

De naamgeving is vaak minder handig; Op een gegeven moment zie je door naamgeving als LitBox, LeightBox, LightBox en LiteBox echt niet meer wanneer iets een typefout is of dat het weer over een compleet nieuw script gaat. Praktisch op elke website van iemand die een soortgelijk script heeft gemaakt zie je dan ook een bericht als het volgende (deze komt van de LightWindow site):

After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.

Het mooie van open-source projecten is dat iedereen de code kan aanpassen. Het nadeel van open-source projecten is dat iedereen een port kan maken van de code. En dat gebeurt er nu dus met de vele thick/light/grey/etc-box scripts. Iedereen maakt ports en hierdoor valt door de bomen het bos niet meer te zien. Daarom hebben we de moeite genomen een groot aantal van deze scripts te evalueren.

Thickbox varianten

Thickbox kan verschillende media types weergeven zoals afbeeldingen, flash filmpjes, andere html bestanden, enzovoorts. Daarnaast is Thickbox een JQuery library en dit is een belangrijk voordeel.

JQuery is een javascript abstractie laag die het voor ontwikkelaars makkelijker maakt om cross-browser scripts te maken. Middels JQuery worden een hoop browser afhankelijke functionaliteiten vertaald in functionaliteiten die voor de meeste populaire browsers werkt. Er zijn tal van deze bibliotheken zoals Prototype/Scriptaculus en Mootools. Het voordeel van JQuery is dat het al standaard in Drupal zit. Door alleen scripts op basis van JQuery te gebruiken bespaar je dus een hoop downloadtijd voor de website bezoeker. Ook werken scripts gebaseerd op een andere bibliotheek vaak niet samen met JQuery.

Voor Thickbox is er ook een port voor de Mootools bibliotheek zodat Thickbox een andere javascript bibliotheek gebruikt. Deze port heet Smoothbox.

Het nadeel van Thickbox is dat de layout van Thickbox een beetje beperkt is. Soortgelijke scripts bieden namelijk de mogelijkheid om bij het vertonen van het script en het scrollen door een image galery een zoom of fade effect te geven. Thickbox heeft dit niet. Lightbox versie 2 daarentegen heeft wel een zoom-in effect. Hierdoor ziet Lightbox er een stuk aantrekkelijker uit. Nadeel van Lightbox is dan weer dat je met Lightbox alleen afbeeldingen kan laten zien.

Lightbox varianten

Lightbox is geschreven in prototype maar er bestaan van Lightbox vele rewrites en ports naar allerlei verschillende javascript platformen.

• Litbox (ook in prototype/scriptaculus maar dan geschreven in 1 class waardoor hij makkelijk te benaderen is)
• verschillende jquery versies van Lightbox (http://drupal.org/project/lightbox2, http://warren.mesozen.com/, http://plugins.jquery.com/project/jquerylightbox_bal)
• Lightbox Plus (gebaseerd op Lightbox v1 maar dan met zoom effect voor de afbeeldingen)
• Lightbox gone wild (gebaseerd op Lightbox v1 maar laad alle data via Ajax en kan naast afbeeldingen ook andere media vertonen)
• Leightbox (gebaseerd op Lightbox gone wild maar dan met enkele SEO verbeteringen)
• Slimbox (port varn Lightbox v2 naar mootools)
• Litebox (port waarbij scriptaculus is vervangen door moofx)

Andere boxes...

Naast de verschillende kopieen van Lightbox en Thickbox bestaan er ook nog een aantal minder bekende scripts die gelijke functionaliteit bieden, zoals...

• Greybox (kan verschillende media types weergeven maar heeft geen special effects bij het openen)
• Greybox Redux (JQuery port van Greybox)
• iBox (kan verschillende media types weergeven maar heeft geen special effects bij het openen en geen gallery support)
• easyAlbums (alleen afbeeldingen en geen special effects bij het openen)
• Highslide (commerciele versie is betaald maar bevat wel speciale effecten en support voor verschillende media types)
• Imagebox (had eigenlijk alles wat nodig had... maar de website is verdwenen)
• Lightwindow (special effect bij het openen, verschillende media types, enorm mooie galery maakt alleen gebruik van Prototype/Scriptaculus)
• Prototype Window (eigenlijk niet bedoeld voor het weergeven van afbeeldingen maar voor het weergeven van floating frames i.p.v. popups. daarom ook geen image gallery en effecten)
• Shadowbox (special effect bij het openen, verschillende media types, mooie effecten als afbeelding niet past en gebruikt JQuery)
• FancyBox (special effect bij het openen, alleen afbeeldingen en gebruikt JQuery)
• Fancy Zoom (special effect bij het openen, alleen afbeeldingen, geen galery en gebruikt JQuery)
• JQuery Fancy Zoom (port van Fancy Zoom voor JQuery)
• FaceBox (special effect bij het openen, verschillende media types, geen gallery en gebruikt JQuery)

Onze keus: Shadowbox

Na het bekijken van alle 25 scripts vielen Lightwindow en Shadowbox ons het meeste op. Het nadeel van Lightwindow in combinatie met Drupal is echter dat Lightwindow gebruik maakt van Prototype/Scriptaculus. En deze bibliotheek is niet te gebruiken in combinatie met JQuery.Dus volgens ons is Shadowbox het beste script voor het weergeven van afbeeldingen in een floating window in Drupal.

Maar ik weet bijna zeker dat over een paar weken wel weer iemand een kopie lanceert van een van de scripts die we nu hebben geevalueerd en dan zal er vast wel weer een hoop verbeterd worden.