Bellissimo slideshow delle immagini degli Ultimi Articoli di Blogger che si aprono a libro.

Come installare in Blogger lo slideshow di immagini Book Flip che si aprono come fossero un libro e che sono estratte dagli ultimi post. Cliccando su una immagine si aprirà l'articolo collegato.

Continuo nel ripristino dei gadget che non sono più funzionanti dopo che Google ha disabilitato il supporto hosting ai file caricati su Google Drive. Il metodo che userò per far funzionare nuovamente i widget è quello di caricare i file esterni direttamente nel modello di Blogger o negli elementi pagina HTML/Javascript.

Il ripristino seguirà necessariamente la regola della segnalazione. Dopo aver pubblicato quasi 6000 articoli di cui circa 700 dedicati ai widget di Blogger non posso ovviamente rimettermi a controllare tutti i post ma lo farò nel momento in cui un lettore mi farà presente che uno di questi gadget ha smesso di funzionare. Cosa che è successa per il gadget di cui presento adesso la nuova versione funzionante.

Il widget è stato creato dal sottoscritto utilizzando lo script Book Flip Slideshow di Dynamic Drive. In un widget HTML/Javascript verrà riprodotto uno slideshow che mostra le immagini degli ultimi post pubblicati nel sito che si aprono uno dopo l'altra come se si sfogliasse un libro

Per l'installazione si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript quindi, in Sezioni del sito, si incolla questo codice dopo aver opzionalmente digitato anche il titolo

<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
***********************************************/
var Book_Image_Width    =300;  // Larghezza
var Book_Image_Height   =300; // Altezza
var Book_Border         = true;  // bordo immagini
var Book_Border_Color   ="gray";  // Colore bordo
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>
<script type='text/javascript'>
 //<![CDATA[    
  var showpostthumbnails_gal  = true;
var random_posts       = false;
var numposts_gal = 10;
var Book_Image_Sources=new Array();
function showgalleryposts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
if (random_posts == true){
    indexPosts.sort(function() {return 0.5 - Math.random()});
}
    if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
    }
    for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {
                posturl_gal =  entry_gal.link[k].href;
                break;
            }
        }
if ("content" in entry_gal) {
            var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        a = s.indexOf("<img");
        b = s.indexOf("src=\"", a);
        c = s.indexOf("\"", b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            var thumburl_gal = d
        } else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd871S8h5ncfWQ09X4s6W38SBMnOnQZYgq_5Pj3IG-D5jbGpdwITN4EIlOGFng7HNdKbAvUBdKH_ocPGpT8zK5wWaa_stblLQZI-46cgIGJgWgFbc8TR11HYtKtlSRalLwqDCh75O41jo/';
if (i== 0){
var thumb_ = 0;
var thumb_link = 1;
}
else{
var thumb_ = i * 2;
var thumb_link = thumb_+1;
}
Book_Image_Sources[thumb_]=thumburl_gal;
Book_Image_Sources[thumb_link]=posturl_gal;
    }
}
 //]]>
 </script>
<script type='text/javascript'>
 //<![CDATA[    
 var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);
function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i];
}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}
function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}
function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}
function B_LdLnk(){if(this.lnk)window.open(this.lnk, '_blank');}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
 //]]>
 </script>
<div id="Book" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmhsd_vXsdO5cKYnwz228e42HJH-vHp8jc7yj-G16pCzkKtlNKOkMCWWk4y4un58j1jDbNPCGhC0zylHlFf2H3bDXO0cDskyIK_Z9C-tachk6OW8_Lyxl-2lxPCchsvvsZUfHl6wrKpo/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 il widget quindi sempre da Layout con il drag & drop del mouse si sposta l'elemento pagina subito sopra all'area del post per poi andare in alto a destra su Salva disposizione.

Demo
Clicca qui

PERSONALIZZAZIONI DEL WIDGET BOOK FLIP

Per facilitare il lettore ho colorato di rosso i più importanti parametri da personalizzare e accanto a ciascuno ho inserito un commento colorato di verde con le informazioni su cosa configura.

1. Va inserito il dominio del vostro sito al posto di quello del blog di test che ho usato
2. La larghezza del widget è di 608 pixel con le immagini 300x300 pixel
3. L'URL ...senza-immagini.jpg si riferisce a una immagine 300x300 pixel che verrà mostrata qualora non ce ne fosse nessuna nell'articolo
4. L'URL ...placeholder.gif si riferisce a una immagine che serve da sfondo
5. Il numero di immagini mostrate è proposto come 10
6. L'intervallo tra una immagine e l'altra è di 1500 millisecondi
7. Sostituendo false con true saranno mostrati i post in modo casuale invece che in ordine.

Chi volesse mostrare questo gadget solo nella homepage o solo in una pagina statica dopo il posizionamento può applicare i tag condizionali con il vincolo prescelto.