Thickbox 3: ecco le novità

Thickbox 3Thickbox è un Javascript di cui ho già parlato in passato, che consente di aprire immagini, iframe e nuove pagine all’interno della stessa finestra in cui si naviga.

La novità di questi giorni è l’uscita della versione 3, a poco tempo dalla versione 2.1. Dal blog dell’autore, ecco l’elenco dei principali miglioramenti:

  • Se non viene impostata una dimensione per l’apertura di contenuto inline, iframe o AJAX, la finestra avrà di default 630px di altezza e 440px di larghezza
  • Il codice è stato ripulito utilizzando JSLint, il file thickbox.js è stato compresso ulteriormente
  • Aggiornamento per utilizzare la versione 1.1.2 di jQuery
  • L’immagine di caricamento è stata cambiata ed ora viene precaricata
  • Lo script ora funziona con le mappe immagini e con gli elementi input dei form oltre che con i semplici links (il tag a)
  • Maggiore integrazione con AJAX, per caricare nuovi contenuti in una finestra di Thickbox già aperta

Le novità sono rilevanti, probabilmente interesseranno di più chi vorrà utilizzare questo Javascript integrandolo con AJAX. E’ una valida alternativa ad altri script analoghi, spesso molto più pesanti: l’attuale versione pesa solo 10kb nella versione compressa, a cui vanno aggiunti circa 20kb di jQuery.

Potete trovare esempi, guide per l’installazione di Thickbox 3 ed ovviamente i file da scaricare sul sito ufficiale.

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

16 commenti su “Thickbox 3: ecco le novità”

  1. Lo script è molto interessante.
    Ho notato dal sito che la compatibilità è garantira con i principali browser, ma nel caso di javascript disattivato cosa accade?

  2. Non mi piace granchè, trovo l’effetto di comparsa della finestra un pò troppo “rude”, preferisco la litebox basata su prototype light e moo.fx
    ciao

  3. ciao, scusate, in questa pagina: http://magiksite.altervista.org/galleriaimmaginikenilguerrierolaleggendadihokuto01.html ho usato questo script, la cosa che mi serviva era che mi ridimensionava le immagini se erano troppo grandi, ma nn so per quale motivo, eppure mi sembra tutto corretto come cose, le immagini si mettono in alto, e nn al centro, e se scorro la pagina rimangono in alto, nn stanno sempre al centro anche se la pagina scorre, mi sapreste dire come mai? ma questo nn mi capita se vedo la demo sul sito del creatore dello script, uso IE 7 grazie

  4. Scusate ragazzi, ma ho notato un problema nello script: se c’è nella pagina un’applet java il box non riesce a nasconderla e l’applet risulterà essere sempre in primo piano bella luminosa.
    C’è un modo per nasconderla? Nel forum ufficiale nessuno ne parla.
    Spero che qualche cervellone mi venga in soccorso

  5. @giulio: pare che il tuo problema sia diffuso sia con Lightbox che con Thickbox o altri script. Forse si potrebbe risolvere modificando il JavaScript in modo che nasconda l’applet al caricamento del lightbox, ma non ne sono sicuro. In ogni caso se fossi al tuo posto cercherei di liberarmi dell’applet Java :)

  6. Ciao Tom, grazie per la risposta. In effetti il problema credo sia comune a molti, con lo script lightbox ero riuscito a risolverlo modificando una stringa, in particolare questa:

    $$(‘select’, ‘object’, ‘embed’, ‘applet’).each(function(node){ node.style.visibility = ‘hidden’ });

    aggiungendo semplicemente il tag applet tra quelli che dovevano essere nascosti, nello scipt thickbox, dato che non sono un programmatore, non sono riuscito a trovare niente del genere, ho comunque chiesto aiuto al forum dello script thickbox, vediamo se qualcuno ci può illuminare!

  7. Ciao a tutti,
    secondo Voi è possibile aprire il modulo Gmap (Flash) all’interno di tickbox??
    Grazie

  8. @christian: sì, Thickbox può essere usato anche per includere pagine html, quindi puoi inserirci qualsiasi cosa, anche Flash.

  9. Buongiorno a tutti,
    nn ci capisco nulla, qualcuno può aiutarmi?

    Dopo aver inserito:
    script type=”text/javascript” src=”path-to-file/jquery.js”
    script type=”text/javascript” src=”path-to-file/thickbox.js”

    e l’HTMl sulle immagini:
    a href=”images/plant1.jpg” title=”add a caption to title attribute / or leave blank” class=”thickbox” rel=”gallery-plants”><img src="images/plant1_t.jpg" alt="Plant 1" /

    ho copiato i 2 files jquery.js e thickbox.js su due file esterni (è corretto???).
    Dopo di che non ho capito cosa devo fare, potete darmi una mano?

    PS: non mi copiava i links… :(

    grazie mille, ciao

  10. Ciao Tommy, hai proprio ragione! Io nella versione attualmente on-line del sito del maneggio dove vado sto usando il Lightbox ma nella nuova versione grafica riveduta e corretta, che andrà a sostituire la vecchia fra qualche settimana, ho deciso di passare a Thickbox anche dopo aver letto il tuo articolo.
    Tra l’altro, cosa ancora migliore, WordPress (con cui ho sviluppato il sito) supporta già di default Thickbox!
    Bastano poche righe di inclusione di codice e il gioco é fatto!

    In pratica nell’header và scritto questo:


    Nel footer invece questa riga:

    Ciao e al prossimo utile articolo.
    Giovanni