Come inserire Lightbox 2 in Blogger per ottenere con le foto effetti speciali e slideshow.

Lightbox è adesso arrivato alla versione 2.04 e può essere scaricato da qui. Il pacchetto comprende un documento CSS, 5 file di tipo javascript, una decina di immagini ed un collegamento ad un file html.
Occorrerebbe fare la configurazione ma per fortuna c’è chi l’ha già fatta. Quindi per integrare Lightbox nel blog occorre semplicemente andare su Layout>HTML, scaricare il modello completo per un eventuale back-up, quindi, subito prima della riga di codice </head>, cioè nella parte non visibile della pagina, incollare il seguente codice

<link href='http://www.fileden.com/files/2009/4/11/2399868/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://www.fileden.com/files/2009/4/11/2399868/Lightbox/lightbox.j' type='text/javascript'/>

  
Quindi salvare il modello.  Adesso per pubblicare delle immagini ed ottenere un effetto da scatola illuminata bisogna procedere nel seguente modo.

• Se non si usa Windows Live Writer 

Le immagini non possono essere caricate dal computer ma debbono essere caricate su un servizio di hosting gratuito tipo Skydrive o Altervista. Quindi quando si inseriscono occorre selezionare l’opzione Aggiungi immagine dal web

ed inserire l’URL che si è acquisito dal servizio in cui si è caricata. Successivamente si passa alla modalità HTML ed si aggiunge l’attributo rel=”lightbox”  subito dopo la <a del collegamento. Verrà cioè una cosa del tipo
<a rel=”lightbox” onblur=…
adesso puoi pubblicare l’articolo.

• Se si usa Windows Live Writer

Le nostre foto debbono essere sempre inserite tramite URL, quindi devono già essere nel web, ma il procedimento si semplifica. Dopo aver cliccato su Immagine si sceglie da Web, si inserisce l’URL, e si clicca su Inserisci




Nella sezione di destra in Collega a, selezionate URL



o, in alternativa, selezionate l’immagine e cliccate sull’icona per inserire un collegamento,  nella finestra che si aprirà inserite nuovamente l’URL dell’immagine

 

eventualmente il titolo, necessariamente lightbox nella sezione Rel. Infine ovviamente si pubblica l’articolo.
Per poter verificare l’effetto recatevi nel mio blog di supporto e cliccate in una qualsiasi immagine di questo post.
Le immagine possono essere ridimensionate con le apposite maniglie e, quando ci si clicca sopra, si espanderanno a grandezza naturale.
Se si pubblicano immagini senza il riferimento a lightbox, queste, nel momento in cui ci si clicca sopra non diventeranno a grandezza naturale. Sarà solo possibile acquisirne l’URL di origine cliccandoci col destro del mouse e scegliendo Copia indirizzo immagine.


COME CREARE DEGLI SLIDESHOW CON LIGHTBOX

Occorre inserire in un articolo delle immagini come illustrato nella prima parte del post. Bisogna però avere l’accortezza di inserire il nome dello slideshow nelle immagini che vogliamo ne facciano parte.
In questo caso invece dell’attributo rel=”lightbox” dobbiamo inserire
rel="lightbox[nome-slideshow]"
Se si usa WLW invece di lightbox inseriremo lightbox[nome-slideshow]. Notare le parentesi quadre. Nell’esempio illustrato prima viene una cosa di questo tipo

dove il nome, in questo caso Cristina, deve essere lo stesso per tutte le immagini.
Se volete vedere una realizzazione pratica andate sempre nel mio blog di supporto e guardate questo post. Lo slideshow non è automatico e per passare all’immagine successiva o precedente bisogna cliccare su Prev o Next che appaiono ai lati delle foto nel momento in cui ci si passa sopra con il mouse.        Da notare che lo script di Lightbox non interferisce con quello di Apture, almeno non ho notato nessuna incompatibilità in questi due post che ho pubblicato.