Pubblicato il 05/07/14e aggiornato il

Come creare degli slideshow anche misti di video, immagini e iframe con PrettyPhoto.

Come installare il plugin PrettyPhoto in Blogger per creare slideshow e gallerie di immagini, video, file SWF e iframe.
Tra tutti i plugin che ho presentato probabilmente PrettyPhoto è quello che probabilmente è il più versatile visto che permette di creare slideshow e gallerie di immagini, slideshow e gallerie di video e anche slideshow e gallerie di iframe in cui inserire pagine web. Inoltre per i video possiamo utilizzare Youtube ma anche Vimeo ed è addirittura possibile mostrare con effetto Lightbox un file flash in formato SWF.

Mi sono già occupato di PrettyPhoto circa tre anni fa e la dimostrazione del successo che ha ottenuto è anche dovuta al Page Rank di quella pagina che è PR3 paragonabile a quello della homepage di un buon blog. Gli effetti Lightbox che si ottengono cliccandoci sopra permettono di visualizzare gli elementi che compongono la galleria insieme agli strumenti di navigazione

prettyphoto-slideshow

Si può passare da una immagine o da un video all'altro oppure cliccare su Play per visualizzare lo slideshow. Cliccando sulla icona a forma di croce si torna alla visualizzazione normale. Prima di procedere alla installazione di PrettyPhoto occorre disabilitare il Lightbox nativo di Blogger. Si va quindi su Impostazioni > Post e Commenti > Mostra immagini con Lightbox e si seleziona il No per poi andare su Salva impostazioni.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head> per poi incollarvi subito sopra questo codice 

<!--Pretty Photo Inizio -->
  <link charset='utf-8' href='//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>   
<!--Pretty Photo Fine -->

Successivamente si cerca la riga </body> e subito sopra si incolla questo secondo codice

<!-- Pretty Photo Inizio -->
<script charset='utf-8' src='//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' src='//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/jquery.prettyPhoto.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'> 
//<![CDATA[
           $(document).ready(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto();
           });
//]]>
      </script>
<!-- Pretty Photo Fine -->

Si salva il modello. Oltre a usare una vecchia versione di JQuery (quella più recente non funziona), si usano un file .CSS e un file .JS caricati su Google Drive come Hosting. Visto che non è chiaro quale sia la larghezza di banda supportata vi consiglio di incollare gli indirizzi evidenziati di giallo nel browser e premere Invio per scaricare i rispettivi file per poi caricarli sul vostro account Google Drive al fine di ottenere il loro Link diretto da sostituire nel codice. 



 

COME REALIZZARE GALLERIE DI IMMAGINI


Per creare un effetto PrettyPhoto a una sola immagine questa deve essere pubblicata con questo codice

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

dove il tag che crea l'effetto è rel="prettyPhoto". Se si utilizza l'Editor di Blogger dobbiamo inserire tale tag subito dopo il link dell'indirizzo della immagine in questo modo

prettyphoto-effetto

Nel caso di una immagine o di un video singolo non ci saranno i pulsanti di navigazione

prettyphoto-immagine-singola

Se invece vogliamo creare una galleria dobbiamo innanzitutto darle un nome. Si possono anche creare più gallerie in una stessa pagina basta dare dei nomi diversi (p.e. galleria1, galleria2, galleria3, ..ecc). In questa seconda ipotesi per attivare l'Effetto PrettyPhoto dovremo usare il tag rel="prettyPhoto[nomegalleria]" in tutte quelle foto che vogliamo facciano parte di tale galleria. Per le immagini pubblicate con l'Editor di Blogger si dovrà aggiungere tale tag mentre si potrà anche incollare direttamente il codice in modalità HTML con questa struttura

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

 

CREARE GALLERIE DI VIDEO CON PRETTYPHOTO

 

Per creare una galleria di video di Youtube bisogna aprire il video in questione e individuarne l'ID che non sarà altro che la stringa alfanumerica dopo /watch?v=
 
id-video-youtube

Il video dovrà essere pubblicato in modalità HTML con questo codice


 <a href="http://www.youtube.com/watch?v=yymd-GmyB-s?width=640&height=360" rel="prettyPhoto[galleria2]" title=""><img alt="YouTube" src="http://img.youtube.com/vi/yymd-GmyB-s/0.jpg" width="300" /></a></div>

Come vedete l'ID del video è presente due volte. La seconda occorrenza serve per ricavare automaticamente l'URL della miniatura dello stesso video. I numeri 640 e 360 sono le dimensioni del player video mentre 300 è la larghezza in pixel della miniatura. Oltre che per Immagini e Video di Youtube, PrettyPhoto può essere usato per creare slideshow e gallerie anche con iframe di pagine web, con video di Vimeo e con file in formato SWF. Per rendere più semplice la creazione di queste gallerie ho pubblicato un codice di esempio




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.