Integrare Lightbox con Blogger: rendete spettacolari le vostre foto!

Lightbox è uno script che ha avuto molto successo in rete che permette di applicare particolari effetti di ingrandimento alle immagini di un sito. Un esempio vale più di mille parole, quindi visitate questa pagina e cliccate sulle varie foto per capire cosa è capace di fare Lightbox.

Dalla versione 2 (adesso Lightbox è giunto alla versione 2.04) è anche possibile creare slide di immagini.

Con questo articolo, riuscirete a integrare Lightbox con Blogger in pochi minuti, e una volta fatto potrete applicare l’effetto di ingrandimento alle varie immagini dei vostri post. Se avete un photoblog o siete artisti che pubblicano i propri lavori sul blog, o comunque volete stupire i visitatori con un effetto davvero d’impatto, Lightbox fa per voi!

Lightbox è leggero e non appesantirà in maniera significativa il caricamento del vostro blog.

Download e configurazione del pacchetto di Lightbox

Da questa pagina potrete scaricare il pacchetto di installazione di Lightbox. Nella pagina sono anche presenti le istruzioni (in lingua inglese) per la configurazione del pacchetto, che possiamo sintetizzare velocemente così:

• pubblicazione in rete delle immagini usate dal pacchetto (dentro la cartella image) e del foglio
• modifica dello script lightbox.js per cambiare l’indirizzo delle immagini utilizzate
• aggancio degli script nella pagina HTML, come spiegato dall’autore

Per Blogger ho già fatto io l’operazione: basterà fare un copia e incolla.

Integrazione di Lightbox con Blogger

Dalla bacheca, andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercare questa riga di codice:

</head>

Subito sopra, incollate questo codice:

<link href='http://sites.google.com/site/creareblog/script-blog/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js' type='text/javascript'/> 
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/> 
<script src='http://sites.google.com/site/creareblog/script-blog/lightbox/lightbox.j' type='text/javascript'/>

E salvate il template. Lightbox è già integrato col vostro blog.

AGGIORNAMENTO: a causa dei problemi avuti, ho modificato la parte in rosso nel codice sopra. Dovrete aggiornarlo nei vostri template altrimenti questa modifica non funzionerà più.

Pubblicare immagini dall’editor online di Blogger

Blogger ha di base un brutto meccanismo di gestione delle immagini che infastidisce l’integrazione con Lightbox e che sto cercando di risolvere (in rete non si trovano molte informazioni sul connubio Blogger + Lightbox, quindi non ho potuto confrontarmi con nessuno), e per poter applicare l’effetto d’ingrandimento alle immagini queste dovranno già trovarsi in rete. Il che significa che prima dovrete pubblicarle utilizzando un servizio come Imageshack o Skydrive, recuperarne l’indirizzo e inserirle nei post tramite l’URL:

Una volta caricata l’immagine, andate in Modifica HTML del post:

E all’inizio del codice che rappresenta l’immagine, aggiungete la parte che evidenzio in rosso:

<a rel="lightbox" onblur="try {parent…

Sicuramente un po’ macchinoso. Specialmente quando avrete più immagini e avrete già scritto il post, ci sarà molta confusione. Per fortuna, Windows Live Writer ci semplificherà, come al solito, la vita!

Ovviamente, potete ridimensionare l’immagine dentro il post, tanto ci penserà Lightbox a ingrandirle!

Pubblicare immagini con Windows Live Writer

Con Windows Live Writer la cosa si fa più semplice. Inserite l’immagine nel post cliccando nell’apposita icona nella toolbar:

Anche in questo caso dovrete selezionare “Da Web” e inserire l’indirizzo dell’immagine. Una volta inserita l’immagine, nelle opzioni a destra selezionate URL nella voce “Collega a” (per far apparire le opzioni dell’immagine, basta cliccarci sopra):

Inserite l’indirizzo dell’immagine e nella voce Rel la parola lightbox:

Attenti a non sbagliare, perchè altrimenti non funzionerà niente. In questa finestra potete anche inserire un titolo per l’immagine, che comparirà sopra l’immagine una volta ingrandita:

Scrivete il vostro post e pubblicatelo. Ecco come apparirà nel blog:

Sembra la vecchia solita immagine vero? Ma cliccateci sopra ed ecco la magia:

Anche in questo caso potete rimpicciolire l’immagine per occupare meno spazio nel post. Come ho scritto all’inizio dell’articolo, Lightbox permette anche di creare delle gallerie di immagini. A breve seguirà un altro post proprio su questo argomento. Nel frattempo, per qualsiasi difficoltà, lasciatemi un commento.

Per le immagini di esempio all’inizio del post, si ringrazia Paul van Roekel.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!