Light Library: da Slimbox a Shadowbox, gallerie in Javascript

Mercoledì 13 Febbraio, 2008

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

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:

PLAIN TEXT
HTML:
  1. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:

PLAIN TEXT
HTML:
  1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Voto: 6 - Home Page Lightbox2

LIGHTWINDOW 2.0

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:

PLAIN TEXT
HTML:
  1. <a href="gallery/0-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
  2. <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>
  3. <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

Shadowbox 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:

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:

PLAIN TEXT
HTML:
  1. <a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
  2. <a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:

PLAIN TEXT
HTML:
  1. <a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image</a>

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

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , ,

12 commenti a: “Light Library: da Slimbox a Shadowbox, gallerie in Javascript”

  1. getAvatar 1.0 Martedì 22 Aprile, 2008 alle 10:06
    Stefmar84 ha detto:

    Ottima raccolta!
    veramente utile e ben dettagliata.
    Complimenti!

    Rispondi Quota
  2. getAvatar 1.0 Sabato 26 Aprile, 2008 alle 17:23
    Lucio ha detto:

    Bravi!
    Utile e chiaro.

    Rispondi Quota
  3. getAvatar 1.0 Martedì 21 Ottobre, 2008 alle 09:40
    Cristian ha detto:

    Sto cercando di utilizzare Shadowbox in sostituzione di Lightbox 2, che su un mio sito Joomla 1.0.15 da’ problemi con Internet Explo(d)er, ma purtroppo senza successo.

    Sicuramente non ho capito io qualcosa. Il sito parla di due moduli, slimbox.js e slimbox-core.js, ma il build me ne genera uno solo, che non funziona. Ho provato sia la standalone che quella per Mootools (che ho preventivamente scaricato ed attivato, chiaramente), ma il risultato non cambia.

    Mi puoi dare un minimo di supporto, per cortesia?

    Rispondi Quota
  4. getAvatar 1.0 Martedì 21 Ottobre, 2008 alle 11:30
    Giovambattista Fazioli ha detto:

    @Cristian: come mai parli dei moduli slimbox.js e slimbox-core.js? Non mi risulta siano in Shadowbox…

    Rispondi Quota
  5. getAvatar 1.0 Martedì 21 Ottobre, 2008 alle 15:38
    Cristian ha detto:

    @Giovambattista Fazioli: eh, e’ stato un lapsus. Intendevo ovviamente Shadowbox :)

    Rispondi Quota
  6. getAvatar 1.0 Martedì 21 Ottobre, 2008 alle 15:48
    Giovambattista Fazioli ha detto:

    @Cristian: che codice usi? Shadowbox per funzionare ha bisogno di due tipo di inizializzazioni. Cioè non basta includere lo script e basta, come accade per altre librerie simili. Postami il codice che vediamo insieme cos’è che non va…

    Rispondi Quota
  7. getAvatar 1.0 Mercoledì 22 Ottobre, 2008 alle 09:02
    Cristian ha detto:

    Ecco qua le info che mi chiedi :)
    Sul sito di Shadowbox, nella sezione Download, ho provato a fare il build sia della versione standalone che di quella per Mootools. Mootools era chiaramente installato e caricato.
    La procedura di build mi ha generato *un solo* file, shadowbox.js, che ho caricato nel header del sito con:

    <script type="text/javascript" src="http://www.miosito/templates/sogema_theme/js/shadowbox.js"></script>

    Ma non funziona :(
    Ho provato pure a caricare una ipotetica skin (che cmq non ho, era solo per fare una prova…) con

    <script type="text/javascript">Shadowbox.loadSkin('classic', 'http://miosito/templates/sogema_theme/js/skin')</script>

    Ma anche qui senza fortuna.

    Altro non ho fatto, ed infatti non funziona :)

    Rispondi Quota
  8. getAvatar 1.0 Mercoledì 22 Ottobre, 2008 alle 09:56
    Giovambattista Fazioli ha detto:

    @Cristian: ok, quella che manca - credo - è l’inizializzazione della libreria. Tutti i passi da te fatti sono sostanzialmente corretti. Quello che devi fare è chiamare questo codice quando la pagina è caricata:

    Shadowbox.init();

    Puoi posizionarti sull’evento onload della pagina o sfruttare i document.ready() del tuo frameword preferito:

    <body onload="Shadowbox.init()">

    Inoltre, se hai scelto di usare Shoadowbox con mooTools, ad esempio, devi anche caricare l’adapter seguendo questo ordine:

    <!-- prima carichi la libreria: mootools, prototype, jquery, ec... -->
<script type="text/javascript" src="mootools.js"></script>
<!-- poi l'adapter -->
<script type="text/javascript" src="shadowbox-mootools.js"></script>
<!-- e alla fine shadowbox -->
<script type="text/javascript" src="shadowbox.js"></script>
    Rispondi Quota
  9. getAvatar 1.0 Mercoledì 22 Ottobre, 2008 alle 10:16
    Cristian ha detto:

    @Giovambattista Fazioli: Mi sfugge ancora qualcosa. Per prima cosa non capisco dove trovare l’adapter. Facendo il build dal sito ottengo un solo file, che immagino sia lo shadowbox vero e proprio. Ma questo non e’ un grosso problema, perche’ potrei anche usare lo standalone (che poi non capisco perche’ creare un adapter se le funzioni sono accessibili pure dallo standalone).

    Essendo poi piuttosto “vergine” in fatto di java ti chiedo un’ultima cosa: l’inizializzazione la faccio embeddando il codice Shadowwbox.init() dentro a uno <script type=javascript> eccetera? Lo posso mettere, vero, nel header del sito per fare in modo che venga caricato su ogni pagina?

    Rispondi Quota
  10. getAvatar 1.0 Mercoledì 22 Ottobre, 2008 alle 10:43
    Cristian ha detto:

    Ho fatto qualche modifica, caricando i files che ho ottenuto cliccando il bottone “Download Code” nella sezione Download del sito. Ma non funziona ancora :) 

    <!-- Shadowbox -->
<script type="text/javascript" src="http://miosito/sogema_theme/js/shadowbox-base.js"></script>
<script type="text/javascript" src="http://miosito/templates/sogema_theme/js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadLanguage('it', 'http://miosito/templates/sogema_theme/js/lang');
window.onload = Shadowbox.init;
</script>
    Rispondi Quota
  11. getAvatar 1.0 Mercoledì 22 Ottobre, 2008 alle 10:46
    Giovambattista Fazioli ha detto:

    @Cristian: tranquillo, da questo punto di vista Shoadowbox non è molto intuitiva! :D Comunque prima di tutto devi scaricare il pacchetto completo che trovi sempre nella pagina Download: in basso ci sono due link: Download full, per scaricare il pacchetto comprensivo di esempi, documentazione e adapters e Download code, che contiene solo i codici, adapters e skin. Scarica quest’ultimo.
    Inoltre, penso intedessi “vergine” di Javascript e non Java, che sono due cose “abbastanza” diverse :D
    Poi, quando usi un codice Javascript all’interno di una pagina HTML, devi sempre racchiuderlo in

    Rispondi Quota
  12. getAvatar 1.0 Mercoledì 22 Ottobre, 2008 alle 10:48
    Cristian ha detto:

    Ops, nel codice che ho postato sopra c’e’ un errore nella trascrittura dei path. Path che sono chiaramente corretti nel sito vero e proprio

    Rispondi Quota

Lascia un commento

TAG XHTML permessi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Usa <pre> per racchiudere codice