17 agosto 2011

Slideshow degli Articoli Recenti con effetto Libro che si Sfoglia.

In realtà l'effetto utilizzato per la realizzazione di questo gadget si chiama Book Flip e non Libro che si Sfoglia, è caricato su Dynamic Drive e il suo autore è l'olandese Ger Versluis. La sua realizzazione risale a otto anni fa ma è ancora molto suggestivo. Attraverso questo gadget si riesce a mostrare le immagini degli ultimi post in ordine naturale o casuale con relativo link. La particolarità sta nel fatto che il movimento di scorrimento avviene come l'apertura di pagine di un libro.
Una immagine animata spiega il funzionamento di questo slideshow più di mille parole
effetto-book-flip
Per installare il widget si va su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si aggiunge questo codice
<script type="text/javascript">
/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
// 7 variabile per controllare l'effetto
var Book_Image_Width    =300;
var Book_Image_Height   =300;
var Book_Border         = true;
var Book_Border_Color   ="gray";
var Book_Speed          =15;
var Book_NextPage_Delay =1500; // 1000 = 1 secondo
var Book_Vertical_Turn  =0;
//variabili per i contenuti
var random_posts        = false; // post casuali
var numposts_gal        = 10;   // numero di articoli della galleria
</script>
<noscript><a href='http://goo.gl/bonnc' target='_blank'><span style='font-size: x-small;'>Book Flip Effect</span></a></noscript>
<script src="https://sites.google.com/site/scriptperilblog/widget-1/bookflip.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/scriptperilblog/widget-1/bookflip2.js" type="text/javascript"></script>
<div id="Book" style="position:relative">
<img src="https://lh5.googleusercontent.com/-lBgvpM5Mj-w/Tkt-ISEw69I/AAAAAAAAUOU/y7gkoYhf-6w/s128/placeholder.gif" width="304" height="304" />
</div>
<script src="http://demo-blogger-widget.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>
Si salva e si posiziona con il mouse. In totale si possono modificare ben 9 parametri. Il dato più importante è quello relativo alla larghezza e all'altezza delle immagini. Considerate che 300 pixel di larghezza di una immagine ci porta a 600 pixel di larghezza per tutto il widget. Se decidete di inserire questo widget in una sidebar, potete benissimo dimezzare questi valori. Per esempio a 150x150 pixel. In questo caso ricordatevi di modificare anche le altre dimensioni del contenitore del widget e portarle per esempio a 154x154 pixel. I valori per larghezza e altezza non debbono coincidere necessariamente.
Gli altri parametri riguardano l'inserimento del bordo alle immagini (true o false), il colore dello stesso bordo, la velocità di scorrimento, l'intervallo tra una immagine e l'altra, la visualizzazione delle miniature in ordine casuale (true o false) e il numero dei post da mostrare nella galleria. Naturalmente occorre anche inserire l'URL della homepage del vostro blog su Blogger per poterne acquisire i feed.
Osservazioni conclusive: Con il codice proposto nel post, il widget non funzionerà con Internet Explorer. Però se aprite la pagina Demo che ho messo in rete vedrete che il gadget è perfettamente visibile anche con Internet Explorer 8 e 9. Questo perché ho caricato i due file javascript su DropBox. Non vi posso dare il link perché il mio DropBox ha dei limiti di banda ma potete crearvi un account se ancora non lo avete, scaricare questi due file
 https://sites.google.com/site/scriptperilblog/widget-1/bookflip.js
https://sites.google.com/site/scriptperilblog/widget-1/bookflip2.js
caricarli nella cartella Public di DropBox e ottenerne il link diretto da sostituire nel codice. Nel primo javascript c'è anche l'URL della immagine che apparirà nel widget nel caso in cui non ce ne fosse nessuna in un post. Può essere sostituita con un'altra esteticamente più valida e più adatta al vostro blog. Queste considerazioni valgono immutate anche per il widget degli Ultimi Articoli con l'effetto RoundAbout.



18 commenti :

  1. Questo widget è veramente carino, e caricando i file su Dropbox funziona proprio bene; l'effetto ottico mi piace moltissimo.
    L'unica cosa che non mi piace è che si vedono solo le immagini, e anche puntando il mouse non compaiono i titoli dei post. Quindi uno deve cliccare "sulla fiducia", senza sapere cosa andrà a leggere.

    RispondiElimina
    Risposte
    1. Non vedo come si possa inserire del testo in immagini che si aprono come in un libro :(

      Elimina
  2. Nemmeno io, a volte sono buffa ^^
    Purtroppo ho provato ad inserire altri due slideshow che proponi (quello che scorre lateralmente e quello che gira in tondo) e sul mio blog non si vedono. Ho provato anche caricando i files .js su Dropbox ma non si vedono ugualmente, probabilmente è un problema di incompatibilità con il mio template o con qualche altro gadget che ho inserito.
    Provo a sfrugugliare ancora un po' sul tuo blog per vedere se ne trovo un altro ;)

    RispondiElimina
    Risposte
    1. Alla fine l'ho inserito. E' l'unico che risulta compatibile con il mio blog e che funziona bene, e poi l'effetto è davvero bello. Una domanda: io ho provato a visualizzarlo sia con Explorer che con Firefox e Chrome, e si vede con tutti e tre. Significa che posso stare tranquilla e che sarà visualizzabile da tutti gli utenti?
      Grazie, Giuliana

      Elimina
    2. @Giuliana
      Controllare come si vede con questi tre browser è sufficiente. I maggiori problemi li dà sempre IE

      Elimina
    3. Grazie. Mi piace proprio tanto, spero non rallenti troppo la pagina (ma non mi pare.) Per quanto riguarda i titoli che non si vedono, ho risolto pubblicando proprio sotto l'elenco degli ultimi articoli.

      Elimina
  3. Ernesto,
    anche se provo a impostare "6" come numero di articoli da visualizzare, continuano a comparirne 10. Da cosa può dipendere? Devo intervenire forse anche sui file .js?

    RispondiElimina
    Risposte
    1. @Giuliana
      Sì, mi sono dimenticato di scriverlo nel post. La riga da modificare è all'inizio di questo file
      https://sites.google.com/site/scriptperilblog/widget-1/bookflip.js
      ed è questa
      var numposts_gal = 10;
      E' stato un mio errore perché queste righe alla fine compaiono due volte. Puoi provare anche a toglierla per gestire il numero degli articoli da mostrare direttamente dal codice del modello

      Elimina
  4. Ho messo questo codice ma non mi funziona, mi escono le tre immagini una accanto all'altra.... che ho errato ??? scusatemi :((

    ho aggiunto il file js dal mio sito googles, ho messo tre immagini caricate tramite picasa e ho tolto lo script della demo in ultimo... ho messo tutto in un pagina html tra i codici head ma nulla.... che ho errato ?

    RispondiElimina
    Risposte
    1. @CavaliereErrante
      Questo codice è per un widget. Si può anche provare a incollarlo in un post ma il funzionamento non è garantito e dipende da un sacco di fattori, non ultimo il tipo di template.

      Elimina
    2. Chiedo scusa io sto cercando di inserirlo in una pagina html, non in un post... è non riesco... ho seguito tutte le istruzioni, non ho dove incollarle il codice altrimenti le avrei fatto vedere... sto impazzendo :))))

      Elimina
    3. @CE-+-+-+
      Questo è un widget per Blogger non per una generica pagina web.

      Elimina
    4. Ok.... chiedo scusa allora... in genere creo gli script in html e poi li inserisco nel gadget html, pensavo che mettendo opportunatamente fra i codici html e head potevo fare discorso all'incontrario... :((
      sorry

      Elimina
  5. Salve ho provato a il suddetto effetto ma non riesco a inserire le immagini che voglio, mi appare solo la scritta "Nessun immagine disponibile per questo post". Come posso risolvere il mio problema?

    Grazie a tutti

    RispondiElimina
    Risposte
    1. @# Non è un problema. E' che tu hai pubblicato articoli che non hanno immagini prima dell'Intervallo. Basta che tu metta una foto nell'articolo prima del jump, read more o come vuoi chiamarlo e le vedrai.

      Elimina
  6. Grazie per la risposta Ernesto
    purtroppo non essendo un esperto non riesco a capire in quale punto del codice devo inserire le immagini. E' possibile avere un breve esempio.

    Grazie mille per la gentile disponibilità.

    RispondiElimina
    Risposte
    1. @# Devi inserire le immagini prima di "Inserisci intervallo"
      http://minus.com/lbt0nD7d6dF6EQ

      Elimina

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.