18 settembre 2011

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
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
Dopo averlo aperto con Zip Genius o 7-Zip, vedrete che sono presenti due file javascript, un file CSS e una cartella.

file-zip-prettyphoto

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.
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
Quando si clicca una immagine, una miniatura, un link con PrettyPhoto, si visualizza una finestra in stile Lightbox ma più completa

prettyphoto

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.



19 commenti:

  1. ma è bellissimo, devo capire per cosa utilizzarlo :)

    RispondiElimina
  2. Hai visto che bellino che è Parsifal :)???
    Mi fa piacere che tu ne abbia parlato...inoltre ti devo ringraziare perchè non sapevo la storia delle miniature dei video: una figataaaaaaaaaaaa!!!Non si finisce mai d'imparare...ora modifico subito la cosa.
    Quando avrai tempo e riuscirai a trovare anche qualcosa per la pagina di benvenuto utilizzando prettyPhoto, te ne sarò gratissimo :P!
    Comunque grazie ancora per il lavoro che svolgi!
    Un caro saluto
    Marco Michele C.MI

    RispondiElimina
  3. Ahhh, dimenticavo...scusa se mi permetto Parsifal :P...per chi non lo sapesse, per poter ingrandire la finestra nella quale poi si aprirà il video, basterà semplicemente aggiungere al link (all'interno del codice HTML ovviamente) la stringa seguente: ?width=800&height=500
    Ovviamente in questo caso le misure sono 800x500 ma si possono tranquillamente cambiare!

    Esempio

    Prima:
    "http://www.youtube.com/watch?v=8hnShvBPiTQ"

    Dopo:
    "http://www.youtube.com/watch?v=8hnShvBPiTQ?width=800&height=500"

    Quando si può dare una mano :).
    Un salutone

    RispondiElimina
  4. @Soffio Di Dea
    Sì, è veramente bello.

    @Marco Michele
    Grazie della precisazione. Questo vale naturalmente anche per l'iFrame. Ho tralasciato qualcosa perché il post era già troppo lungo e non volevo fare un romanzo :D

    RispondiElimina
  5. Figurati :)...vero, mi son perso qualche pezzo per strada :P...ovviamente vale anche per i Contenuti Flash.
    Beh, dai, le cose essenziali e fondamentali c'erano: questo è l'importante!

    RispondiElimina
  6. Ernesto, innanzitutto grazie per la rapidità e la chiarezza con la quale ci tieni sempre aggiornati.

    Ho seguito le istruzioni passo passo.. e non so per qualche strano motivo l'effetto non funziona.

    io vorrei usare prettpohto solo per i video ma a quanto pare devo aver il mio blog proprio non ne vuole sapere

    http://www.xboxbook.org/p/video.html

    cliccando la miniatura mi manda su youtube :(

    RispondiElimina
  7. molto bello,ma io ho sempre paura a modificare l'HTML.
    va bè.....almeno so che esistono certe cose.
    un salutone,caro Ernesto.
    lasempredicorsa
    Lella

    RispondiElimina
  8. Ciao Lella :) E' sempre un piacere quando passi da queste parti. Un grande saluto anche da parte mia.

    @GEKO24
    Hai incollato il codice per togliere il Lightbox nativo? Se sì prova a inserire questo codice in un post
    <a href="http://www.youtube.com/watch?v=8ny1jGa_AO4" rel="prettyPhoto" title=""><img alt="YouTube" src="http://img.youtube.com/vi/8ny1jGa_AO4/0.jpg" width="60" /></a></div>
    Se ti funziona vuol dire che sbagli qualcosa nell'inserimento dei tuoi video.
    In subordine prova a caricare i file su DropBox come specificato nel post.

    RispondiElimina
  9. Ciao Pars
    Sto utilizzando questo effetto (che preferisco a LB) solo per una immagine nel blog. Credi che ne valga la pena in termini di caricamento? Gli script rallentano o vengono richiamati solo quando viene aperta l'immagine? (considera che non utlizzo miniatura ma solo un semplice testo che richiama la foto associata a PrettyPhoto.

    PS. Cmq confermo che l'effetto nativo LB di blogger non mi ha ca..to manco di striscio, mah...

    RispondiElimina
  10. @Auto ...
    Basta che metti i tag condizionali in modo da caricare gli script solo nella pagina che ti interessa

    RispondiElimina
  11. Ma.. a me piace l'effetto che viene dato dal lightbox nativo di blogger alle immagini, ma esiste un metodo per inserire un lightbox esclusivamente per i video che non mi costringa perforza ad eliminare l'effetto galleria di blogger ?

    RispondiElimina
  12. @GEKO24
    Puoi inserire questo e usarlo solo per i video (o anche per i link) e lasciare nelle immagini l'effetto nativo di Blogger.

    RispondiElimina
  13. non mi funzionava, ho seguito il tuo prezioso consiglio di caricare su dropbox ed ora tutto ok!

    domandina.. è possibile mettere i video quasi full screen?

    RispondiElimina
  14. @GEKO24
    Non ci dovrebbero essere problemi. Guarda il commento 3)
    aggiungi per esempio
    ?width=1200&height=750
    all'URL di Youtube.

    RispondiElimina
  15. PrettyPhoto è bellissimo e mi aggrada molto, ma ci sono 3 cose che non vanno:
    PRIMO: sulla barra degli indirizzi ogni volta che apri una foto all'URL si va ad aggiungere # seguito dal tag rel (tipo [gallery1]/1) il che vuol dire che se chiudi la foto e fai un refresh della pagina (con il tasto F5) ti si apre in automatico l'ultima foto aperta, e ciò non è bello

    SECONDO: è vero che c'è il tasto "like" di facebook, ma se clicchi non ti condivide la foto che stai vedendo bensì l'URL della pagina, inoltre una volta cliccato "like" su una foto, resterà cliccato anche in tutte le altre foto... mistero!

    TERZO: sarebbe bello (proprio come su facebook) che col tasto destro sulla foto aperta si potesse salvarla, e invece ti salva la pagina html

    INSOMMA, brutte gatte da pelare, ma se qualcuno riuscisse a sbrogliare questi problemi sarebbe una gallery perfetta

    Grazie in anticipo

    RispondiElimina
  16. @MrNoise
    La perfezione purtroppo non esiste ;)

    RispondiElimina
  17. La perfezione no, ma sicuramente quello che ho scritto l'ho scritto perchè si può fare.

    Il punto primo (stringa sulla barra degli indirizzi) l'ho già risolto.

    Sul secondo ci sto sbattendo la testa. Per il terzo punto si vedrà.

    RispondiElimina
  18. Ciao a tutti. Mi chiamo Simone e sto cercando di realizzare un sito amatoriale per pubblicare le mie foto...dato che non ci capisco nulla di HTML e vari sto cercando di raccogliere idee opensource sulla rete e di tirar fuori qualcosa di carino.

    Sto leggendo il tuo blog e ho trovato esattamente questo che mi serve!

    Dunque il sito è questo (non ho ancora dominio): http://dl.dropbox.com/u/22933018/SITO/index1.html

    Quello che vorrei fare è:
    Per ogni foto nel menu ALBUM o PORTFOLIO, aprire prettyphoto con le immagini relative a quell'album. Mi spiego: se vado in ALBUM-GREEN, cliccando su Green vorrei si aprisse una presentazione con prettyphoto con tutte le foto relative all'album green (che ovviamente non sono visibili nella pagina.
    Sapete consigliarmi come si fa?

    Io ho aggiunto tutti i js e i css che ho trovato sul sito e gli script che, sempre sul sito di prettyphoto, erano indicati. Però poi non so come indicare le foto relative all'album e come puntare a quelle cliccando sulla foto raprresentativa dello stesso.

    Spero di essermi spiegato.
    Grazie infinite per la disponibilità.
    Simone

    RispondiElimina
  19. @Simo
    Auguri. Io pubblico i post per condividere le mie esperienze e le mie modeste conoscenze. Non sono però un professionista che realizza siti su ordinazione. Inoltre la mia esperienza si rivolge solo a siti sulla piattaforma Blogger.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.