Come inserire automaticamente l'effetto Lightbox in tutte le immagini di Blogger.

Effetto Lightbox per le immagini di Blogger

Ho già dedicato diversi articoli all'Effetto Lightbox che è famosissimo e che permette di aprire le immagini a grandezza naturale in una finestra popup rendendo opaco tutto il resto dello schermo. Vi rimando ai seguenti articoli per conoscere meglio di cosa si tratta

      Illustrazione dell'effetto Lightbox - 
      Gallerie di foto con Lightbox -
      Plugin Video LIghtbox per Wordpress -

Mi è stato segnalato per email che è stato creato uno script per inserire automaticamente l'effetto Lightbox in tutte le immagini del blog. Il lettore del blog non mi ha comunicato l'indirizzo del suo sito altrimenti gli avrei messo il link. Mi ha però dato quello del post in cui viene illustrata questa metodologia alternativa per l'installazione di Lightbox su Blogger. C'è però il problema che lo script presentato nel post non funziona perché non è presente un file javascript necessario all'effetto. Ho rimediato a questa mancanza e adesso vado a presentarvi come ottenere l'effetto Lightbox su tutte le foto del nostro sito, anche quelle già pubblicate, senza inserire rel="lightbox" nel loro codice come si doveva invece fare con i metodi precedenti.

Andare su Design > Modifica HTML e cercare  </head>, subito sopra incollare questo codice

<!--Lightbox Effect Start-->
<link href='https://sites.google.com/site/scriptperilblog/slideshow/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>
</script><script src='https://sites.google.com/site/scriptperilblog/slideshow/lightbox.js' type='text/javascript'>
</script>
<noscript><a href='http://goo.gl/EWkOY' target='_blank'><span style='font-size: x-small;'>Lightbox Effect</span></a></noscript>
<!--Lightbox Effect End-->

Salvare il modello. E' tutto! Quando pubblicherete delle immagini inserite dal computer o dopo averle caricate su Picasa, si creerà in modo automatico una galleria di tutte le foto del blog. Nella parte bassa della finestra popup sarà visualizzato il numero delle immagini presenti che potranno essere navigate attraverso i classici pulsanti Prev e Next che compariranno non appena ci si passerà sopra con il mouse

Ho inserito una demo in rete con immagini postate con le diverse modalità

• Demo Lightbox - Primo post - Secondo post -

L'effetto funziona con Firefox e con Chrome mentre non si vede con IE9. Ieri è uscita la prima versione di IE10 che supporta l'HTML5, speriamo che le cose migliorino anche con questo browser. Concludo osservando che l'effetto è stato anche testato sui nuovi template del Designer Modelli.

Aggiornamento: Le immagini postate con Windows Live Writer non entrano a far parte della galleria quando sono pubblicate con l'opzione Collega a > Nessun collegamento. Se invece sono inserite scegliendo Collega a > Immagine di origine, ci sarà un tentativo di caricamento continuo senza fine. Quindi questo effetto funziona solo con le immagini postate attraverso l'Editor ufficiale di Blogger. Buone notizie invece per quello che riguarda Google Friend Connect. Come potete constatare aprendo i due post di prova, l'effetto Lightbox è compatibile con GFC, per verificarlo cliccate sul mio avatar.

Aggiornamento n°2: Adesso la galleria riguarderà solo il singolo post e non tutto il blog. Se ci sarà una sola immagine come in questo articolo, non si vedrà il numero delle foto nella parte bassa. 

Aggiornamento n°3: Se avete problemi con l'Effetto LightBox nativo di Blogger, seguite le istruzioni di questo articolo.