È stata rilasciata proprio ora (grazie alla segnalazione dell’autore Michael J. I. Jackson) la release 3.0 beta di Shadowbox.js. Oltre alla nuova grafica del sito ecco i più importanti cambiamenti di questa release preliminare:
Articoli con Tag ‘slideshow’
Shadowbox 3.0 beta
Shadowbox assetURL: impostare il percorso delle immagini
Quando Shadowbox apre la sua finestra per mostrare un contenuto (immagine, iframe, Movie, ecc…), visualizza, nell’attesa, un gif animato che viene fornito nel pacchetto. Se la pagina che sta utilizzando Shadowbox si trova allo stesso livello della cartella images, tutto funziona bene. Per default, infatti, Shadowbox cerca la gif animata sotto images/loading.gif – o images/loading-light.gif se avete scelto gli stili light (shadowbox-light.css). Altrimenti, e spesso c’è il rischio anche di non accorgesene, se ci troviamo in una diversa alberatura, viene generato un bel codice 404 – di pagina non travata; nel nostro caso di file non trovato!
Per risolvere il problema basta inizializzare Shadowbox con un parametro opportuno che indica proprio il percorso assoluto della cartella images: su undolog.com, ad esempio, ho posizionato la gif animata del loading direttamente nella cartella images presente in root (come circa un miliardo di altri siti
. Per rendere accessibile questa cartella a Shadowbox, a prescindere dal percorso, ho inserito semplicemenete:
1 2 | // init shadowbox with assetURL parameter Shadowbox.init( {assetURL: 'http://www.undolog.com/' } ); |
Tutti i cloni di Lightbox in una matrice dinamica
Planetozh ha realizzato uno splendito strumento dinamico in grado di elencare tutte le librerie Javascript simili a Lightbox.
Tramite un pannello (vedi immagine qui a sinistra) con una serie di "spunte" (checkbox), che indicano le varie caratteristiche delle librerie, è possibile eseguire un filtro ottenendo così la lista di una o più librerie che fanno al caso nostro. Speriamo che l’autore mantenga aggiornata questa fantastica pagina, utilissima nel districarsi tra le numerose e sempre più potenti librerie di questo tipo.
Light gallery: Lightview 2.0.0_rc1
Appena rilasciata ecco l’ennesima libreria Unobtrusive Javascript per gallerie di immagini e non solo. Lightview, nella release 2.0.0_rc1, aggiunge anch’essa le funzioni per “aprire” delle Window con contenuti che vanno oltre la semplice immagine: filmati Flash, QuickTime, Form e IFRAME! Rispetto alla precedente versione (la 1.1.0 – che gestisce solo immagini), quindi, questa release candidate si arricchisce delle funzionalità presenti anche in altre librerie. Gli strumenti richiesti da Lighview per funzionare sono gli arcinoti Prototype 1.6.0.2 e Scriptaculous 1.8.1. Gliattributi usati per gestire la libreria sono class e rel.
Un’aspetto interessante di questa libreria è l’estrema cura della grafica con cui si presenta.
Voto: 9 – Home page di Lightview
Light Library: da Slimbox a Shadowbox, gallerie in Javascript
Qualcuno potrebbe dire - e non a torto – basta! Di librerie Javascript (Unobtrusive – non intrusive, o parzialmente) per gestire immagini e gallerie ce ne sono davvero tante. Comunque sia ecco la lista, con pregi e difetti, delle migliori che ho provato.
SLIMBOX 1.41
Estremamente minimale, 7K (alla versione 1.41), richiede mootools per funzionare. Come indicato sulla Home page è un vero e proprio clone grafico di Lightbox, che vedremo più sotto. Sinceramente, a parte l’estrema compattezza della libreria, non possiede caratteristiche peculiari. Sullo stesso sito, comunque, è possibile trovare anche uno script per generare riflessioni runtime… al limite può essere utile questo
Voto: –6 – Home Page Slimbox, Home Page Reflection.js for MooTools
LIGHTBOX2
Una delle più note e semplici. Gestisce in questa release sono immagini (quindi non funziona con QuickTime, Flash o altro). Per il suo funzionamento richiede Prototype e Scriptaculous. Usa l’attributo rel per identificare i link delle immagini da processare:
Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:
1 2 3 |
Voto: 6 – Home Page Lightbox2
LIGHTWINDOW 2.0
Anche questa è abbastanza diffusa! Dopo tutto come capire qual’è la più usata?
. Comunque sia è estremamente completa e versatile. Sul sito campeggia la richiesta di donazioni per l’acquisto di un Mac… un tantino invasiva e pressante… Comunque sia, come la precedente, per il suo funzionamento, richiede la presenza di Prototype e Scriptaculous. A differenza della precedente, tuttavia, questa permette di visualizzare moltisiimi tipi di file: dalle immagini, filmati QuickTime, filmati Flash, pagine HTML esterne e PDF. Di contro, utilizza vari attributi, alcuni facoltativi (author,caption e title) altri obbligatori (class e params -per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l’attributo rel:
1 2 3 | <a href="gallery/0-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a> <a href="gallery/1-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a> <a href="gallery/2-sushi.jpg" class="lightwindow" rel="[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a> |
Voto: 8 – Home Page LightWindow 2.0
SHADOWBOX 1.0B
Nonostante sia alla versione 1.0 beta, questa è forse la libreria più completa, sia dal punto di vista funzionale sia per le librerie supportate. Per il suo funzionamento, infatti, è possibile scegliere tra una serie di framework, grazie a dei file “adapter” appositamente realizzati e fornite dall’autore:
- Yahoo! User Interface Library (yahoo, dom, event, anim)
- Ext (standalone, ext-core.js)
- Prototype + Scriptaculous
- jQuery
- MooTools (requires Fx.Styles and its dependancies)
- Dojo Toolkit (thanks Peter Higgins)
L’effetto visivo (configurabile tramite skin/css), poi, a differenza delle altre, è sicuramente più accattivante. Gli attributi usati sono solo il rel dove, al sue interno, trovano spazio tutti gli altri parametri di configurazione. Ad esempio, per realizzare una gallery, basta usare:
1 2 |
Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:
Su Internet se ne possono trovare anche altre, come ad esempio Highslide JS. Anzi, se volete segnalarmi qualche altra libreria… Comunque sia, personalmente, preferisco Shadowbox per semplicità, scalabilità e cross-framework.
Voto: 9 – Home Page Shadowbox 1.0B







Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...