Effetto Lightbox in Blogger per gallerie di immagini, video, link, iframe e flash con lo script PrettyPhoto.

Come installare l'Effetto PrettyPhoto in Blogger per mostrare gallerie di slideshow con immagini, video e iframe in una finestra modale con pulsanti di navigazione e di condivisione sociale.

Nei blog della piattaforma Blogger di default da diversi anni è stato implementato un Effetto Lightbox nativo per le immagini. Se abilitato quando si clicca su una immagine questa viene mostrata a grandezza naturale su uno sfondo della pagina oscurata. Nella parte bassa della pagina verranno visualizzate le miniature di tutte le immagini presenti nella pagina per navigare tra di esse cliccandoci sopra.

Il Lightbox nativo di Blogger può anche essere disabilitato andando su Bacheca -> Impostazioni -> Post, Commenti e Condivisioni -> Post -> Mostra le immagini con Lightbox. Si seleziona il No al posto del Sì nelle opzioni quindi si clicca in alto a destra su Salva Impostazioni. 

In questo articolo vediamo come aggiungere un nuovo effetto simil Lightbox denominato PrettyPhoto che, contrariamente all'effetto nativo di Blogger, permette di applicare tale effetto non solo alle foto ma anche ai video di Youtube e Vimeo, ai link, agli iframe e pure agli oggetti in Flash.  

COME INSTALLARE PRETTYPHOTO NEI BLOG GRATUITI DI BLOGGER

Se avete un blog del tipo nomeblog.blogspot.com allora l'installazione di questo javascript che si basa su jQuery è piuttosto semplice. Quando il lettore cliccherà su una foto o su un video,  

l'elemento cliccato si visualizzerà in una finestra modale con la crocetta per chiudere foto o video, con le icone di navigazione tra gli elementi della galleria e con i pulsanti per la condivisione su Twitter e Facebook.  Oltre a foto e video si può aggiungere l'effetto PrettyPhoto anche a iframe ottenuti linkando pagine web e a oggetti in formato Flash. Si possono creare anche gallerie miste con video, immagini, link e flash. Ciascuna galleria può essere denominata a piacere.

Dopo aver salvato il template e aver disattivato il Lightbox nativo di Blogger si va su Modello -> Modifica HTML quindi si cerca la riga </head> e, subito sopra, si incolla questo codice

<!--Pretty Photo Inizio --> 
  <link charset='utf-8' href='https://sites.google.com/site/scriptperilblog/slideshow/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>    
<!--Pretty Photo Fine -->

Si cerca poi la riga </body> e, subito sopra, si incolla quest'altro codice

<!-- Pretty Photo Inizio -->
<script charset='utf-8' src='https://sites.google.com/site/scriptperilblog/slideshow/jquery-1.4.4.min.js' type='text/javascript'/> 
<script charset='utf-8' src='https://sites.google.com/site/scriptperilblog/slideshow/jquery.prettyPhoto.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'> 
           $(document).ready(function(){ 
                $(&quot;a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto(); 
           }); 
      </script>
<!-- Pretty Photo Fine -->

Si salva il modello.

Demo
Clicca qui

COME INSTALLARE PRETTYPHOTO IN UN DOMINIO PERSONALIZZATO

Se avete acquistato un dominio vostro del tipo www.esempio.com e avete rediretto il blog gratuito allora i javascript e i CSS caricati su Google Sites non funzioneranno. Dovrete quindi caricarli su un vostro dominio privato o nella cartella Public di Dropbox per ottenerne il link diretto. Il sistema più semplice per farlo è quello di incollare nella barra degli indirizzi del browser gli URL colorati di rosso per poi andare su Invio. Verranno scaricati i tre file che andranno caricati su Dropbox o altro hosting. Il codice da incollare sarà lo stesso con l'eccezione degli URL che dovranno essere sostituiti dagli hotlink dei file caricati. Chi volesse personalizzare ulteriormente l'effetto può scaricarsi tutti i file.

• File ZIP di tutti i file di PrettyPhoto

Oltre ai CSS e ai javascript ci sono anche le immagini delle icone che dovranno essere caricate online e inserite nei file usando magari un programma come Notepad++.

COME USARE L'EFFETTO PRETTYPHOTO

Per rendere le cose più semplici ho pensato utile postare online un codice di esempio di gallerie di foto, gallerie di video, gallerie di iframe e di gallerie miste.

• Codice di esempio di gallerie di foto, video e iframe di PrettyPhoto

FOTO SINGOLA

Per aggiungere l'effetto a una singola foto bisognerà aggiungere rel="prettyPhoto" al codice HTML della immagine. Un esempio potrebbe essere questo

<a href="URL_IMMAGINE" rel="prettyPhoto" alt="nome-galleria"><img  height="200" src="URL_IMMAGINE" width="320" /></a>

Se l'immagine è stata caricata con l'Editor di Blogger si va su HTML e si incolla rel="prettyPhoto" subito dopo l'URL di collegamento della foto.

GALLERIA DI FOTO

Se vogliamo creare una galleria dobbiamo dare un nome alla stessa e aggiungere rel="prettyPhoto[nomegalleria]" nello stesso modo che abbiamo visto per una foto singola. In una stessa pagina si possono inserire anche più gallerie. Quando il lettore cliccherà su una foto di una galleria visualizzerà le miniature solo delle immagini che appartengono alla stessa galleria e non anche delle altre presenti nella pagina. Se si utilizza Open Live Writer per pubblicare i post, dopo aver caricato una immagine, si clicca sulla stessa per selezionarla in modo da visualizzare lo strumento Picture Tools.  In Link to si dovrà scegliere Source Picture per poi pubblicare dopo aver aggiunto la stringa già menzionata andando in Origine. Il codice di una immagine inserita in una galleria potrebbe essere il seguente

<a href="URL_IMMAGINE" rel="prettyPhoto[galleria1]" alt="nome-galleria"><img  height="217" src="URL_IMMAGINE" width="320" /></a>

Il nome della galleria [galleria1] è ovviamente puramente indicativo. 

GALLERIA DI VIDEO

Per le gallerie di video di Youtube dobbiamo innanzitutto trovare l'ID del video che si trova nell'indirizzo dello stesso dopo watch?v. Si può risalire alla miniatura di un video di Youtube che sarà quella visualizzata nella pagina web. Il codice da usare per una galleria di video è il seguente

<a href="http://www.youtube.com/watch?v=9cBZl6z5j8M" rel="prettyPhoto[galleria2]" title=""><img alt="Video-YouTube" src="http://img.youtube.com/vi/9cBZl6z5j8M/0.jpg" width="60" /></a>

dove l'ID del video evidenziato di giallo si inserisce due volte per riprodurre il video e per la miniatura. Anche in questo caso il nome della galleria [galleria2] è puramente indicativo.

Non mi dilungo ulteriormente su come si possa creare anche gallerie di iframe, di video di Vimeo e gallerie miste di foto e video. Chi è interessato può trovare lo schema di inserimento nel codice di esempio di dell'Effetto PrettyPhoto pubblicato su Google Drive e linkato in precedenza.