Milkbox è un plug-in per MooTools che distribuisco gratuitamente su licenza MIT, e che è utilizzato da migliaia di persone in tutto il mondo.
Si tratta di una variante (yes, l'ennesima...) di Lightbox. L'ho sviluppato inizialmente perché volevo un'interfaccia ancora più pulita e animazioni ridotte al minimo e perché al tempo non ne esisteva una versione per MooTools 1.2. In seguito, soprattutto con la versione 2.0, Milkbox è diventato qualcosa di molto più complesso.

Questa pagina vuol essere solo una brevissima introduzione in italiano. Il vero sito di Milkbox, pieno di esempi e spiegazioni tecniche e, per ovvie ragioni scritto in inglese, si trova su http://reghellin.com/milkbox/ (link esterno).

Caratteristiche principali (ma c'è molto di più...)

• Configurazione del tutto simile a quella di Lightbox

• Supporto di immagini e/o swf/flash

• Autoplay, configurabile anche galleria per galleria. Pulsante play/pausa.

• Auto-size: se l'immagine è troppo grande per la finestra, viene adeguatamente rimpicciolita.

• Gallerie definibili anche da xml

• Gallerie apribili direttamente da JavaScript (e dunque anche da ActionScript via ExternalInterface), con varie opzioni

• Transizioni ridotte al minimo, ma possibilità di usare uno qualsiasi degli effetti presenti nel pacchetto Fx.Transitions di MooTools.

• Navigazione anche da tastiera

• File grafici dei pulsanti scaricabili e dunque personalizzabili

• Aspetto (background, border, padding, ecc) completamente personalizzabili in parte via css e in parte via opzioni js

Un semplice esempio (vedi sito ufficiale per una lista completa):

Foto di Retinafunk

Principali opzioni JavaScript. Tra parentesi i valori di default.

• overlayOpacity (0.7): l'opacità dell'overlay. Il colore si imposta nei css.

• topPosition (50): la distanza in px di Milkbox dal lato superiore della finestra. Buono da impostare se si usano immagini/swf grandi.

• canvasBorderWidth ('0px'): larghezza bordo interno. Se le immagini hanno fondo dello stesso colore impostato Milkbox (default bianco), aggiungere un bordo alle immagini può allinea visivamente il design, ed è essere molto comodo farlo via css/js piuttosto che con photoshop..

• canvasBorderColor ('#000000'): colore bordo interno.

• canvasPadding ('0px'): padding bordo interno.

• resizeDuration (500): durata degli effetti.

• resizeTransition ('sine:in:out'): tipo di effetto

• autoPlay (false): attivazione autoplay

• autoPlayDelay (7): ritardo (in secondi) fra un file e l'altro in modalità autoplay. Tutte le opzioni di autoplay si possono sovrascrivere gallery per gallery e chiamata per chiamata.

• removeTitle (false): a volte serve rimuovere il title per non farlo comparire nei tooltip.

• onXmlGalleries ($empty): se si usano gallerie xml. Questo evento custom è scatenato una volta caricato l'xml ed eseguito il parsing.

• onClosed ($empty): evento custom per qualsiasi cosa si voglia fare una volta chiusa la Milkbox. Io lo uso principalmente per ripristinare le opzioni originali via restoreOptions() se devo modificarle temporaneamente (vedi sito Milkbox).