PrettyPhoto per slideshow di foto, gallerie di video e pagine web.

L'introduzione dell'Effetto nativo tipo Lightbox su Blogger ha provocato delle reazioni contrastanti. Ci sono coloro che lo hanno amato immediatamente visto che non avranno più la necessità di installare effetti manualmente ma ci sono anche quelli che sono rimasti irritati perché tale effetto va a incidere pesantemente su layout che erano già stati accuratamente personalizzati e configurati.

La pubblicazione di un codice che disabilita questo effetto ha lasciato soddisfatti quelli che usano Facebox ma non altrettanto felici gli utenti di Lightbox visto che lo script che ho presentato provoca dei problemi anche al Lightbox non nativo . Dopo la lettura di un commento in cui venivo informato che lo script KillingLightbox non influenzava il plugin PrettyPhoto, ho pensato di illustrare la sua installazione. Potrebbe essere utile a quei lettori che non amano questa nuova feature di Blogger, che avevano installato Lightbox e che si ritrovano con effetti sovrapposti.

In realtà mi ero già occupato di questo script JQuery ma solo en passant presentando il plugin Pretty Sociable che è molto simile a PrettyPhoto e che è stato realizzato dallo stesso autore. Prima di passare alla installazione occorre disabilitare l'effetto nativo di Blogger. Bisogna semplicemente aggiungere un codice nel modello subito sopra della riga </head>. Visto che le cose in questo senso sono in evoluzione, coloro che leggeranno questo post in futuro è opportuno che si informino se sia sempre necessario aggiungere questo codice. Istruzioni e aggiornamenti saranno comunque presenti in questo articolo

• Come eliminare l'Effetto Lightbox nativo di Blogger -

Quando si è fatta questa operazione, si deve verificare che cliccando su una immagine non si apra la finestra popup dell'effetto. Andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Cercare la riga </head> e, subito sopra, incollare quest'altra riga

 

<!--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 -->

Cercare quindi la riga </body> e, immediatamente prima, incollare 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'/>
<noscript><a href='http://goo.gl/exkJp' target='_blank'><span style='font-size: x-small;'>PrettyPhoto</span></a></noscript>
<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 -->

Salvare il modello. Il file CSS (quello sopra a </head>) e i file javascript li ho caricati su Google Sites con la modalità Schedario. Se volete fare una cosa più personalizzata, potete scaricare questo

• File compresso di PrettyPhoto -

Dopo averlo aperto con Zip Genius o 7-Zip, vedrete che sono presenti due file javascript, un file CSS e una cartella.

Nella cartella ci sono tutte le immagini degli strumenti di navigazione. Sono state caricate su Picasa ma, se subentrasse qualche problema di hosting, si possono sempre ricaricare e ottenerne i link diretti che poi dovranno essere sostituiti nel file CSS. Il CSS e i due javascript dovranno essere caricati su DropBox nella cartella Public, acquisirne il link pubblico che poi potrà essere sostituito nei due codici appena mostrati. Coloro che non hanno problemi di funzionamento con questo codice possono tranquillamente saltare questo passaggio e riprendere dal punto in cui hanno salvato il template.

Con questo effetto si possono inserire nei post delle immagini singole, dei video, delle gallerie di immagini, delle gallerie di video, degli oggetti in flash e degli iFrame a pagine esterne. Per i video, oltre a Youtube, sono supportati Vimeo e i video in formato QuickTime.

• Demo dell'Effetto PrettyPhoto -

Ho pensato di fare cosa gradita ai lettori di pubblicare integralmente il codice HTML del post in modo che possa servire come schema per inserire PrettyPhoto

• Codice di esempio per PrettyPhoto -

Quando si clicca una immagine, una miniatura, un link con PrettyPhoto, si visualizza una finestra in stile Lightbox ma più completa

Si vedranno anche i pulsanti di condivisione su Twitter e su Facebook oltre alle miniature di tutte le foto e gli strumenti di navigazione. Se si clicca sul Play più a sinistra inizierà la riproduzione dello slideshow della galleria. Nel codice di esempio sono mostrate la stringhe che devono essere aggiunte a immagini, video o link per avere l'effetto PrettyPhoto. Si tratta di 

  rel="prettyPhoto" per un elemento singolo e di

rel="prettyPhoto[nomegalleria]" se si vuole creare una galleria con più elementi. A titolo di esempio posto il codice per una galleria di foto

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

dove si inserisce per due volte l'indirizzo della immagine. Se si utilizza Windows Live Writer si seleziona la foto, si sceglie Strumenti immagine > Collega a > Immagine di origine e si inserisce nuovamente il link ottenuto da Picasa. Naturalmente le dimensioni possono essere variate. Se invece vogliamo creare una galleria di video presi da Youtube, la sintassi del codice è la seguente

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

L'ID del video di Youtube è ripetuto anche nella seconda riga. In questo modo si può ottenere l'indirizzo della miniatura del video inserito. Ulteriori informazioni su come inserire oggetti in flash e iFrame possono essere trovate in questa pagina di istruzioni di PrettyPhoto. Concludo ricordando che si possono creare anche delle gallerie miste che abbiano al loro interno immagini, video e collegamenti a pagine web.