Slideshow di immagini con frecce di navigazione e link ai post.

Come creare un semplice slideshow di immagini da mostrare in un widget di Blogger o da pubblicare in una pagina statica.

Il widget che vado a presentare non ha bisogno di javascript esterni perché il file .js è già implementato nel codice. Quindi non ci saranno problemi quando tra poco più di dieci mesi Google Drive smetterà di funzionare come hosting. Questo widget potrà essere incollato in una pagina statica oppure anche in un widget HTML/Javascript a seconda delle esigenze.

La Demo ha sei immagini ma se ne possono inserire anche altre così come si possono modificare le loro dimensioni come quelle del contenitore. Se si visualizzassero le frecce direzionali una in alto e una in basso significa che la larghezza del contenitore è troppo stretta e che quindi va aumentata ma questo lo vedremo alla fine dell'articolo. La navigazione tra le immagini si può effettuare con le frecce poste in alto o cliccando sui numeri posti in basso.

Ritengo comunque che l'estetica non ne soffra per nulla. Il codice da incollare è questo:

<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.fader=function(){
        function fade(n,p){this.n=n; this.init(p)}
        fade.prototype.init=function(p){
                var s=T$(p.id), u=this.u=T$$('li',s), l=u.length, i=this.l=this.c=this.z=0;
                if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
                s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0;
                for(i;i<l;i++){
                        if(u[i].parentNode==s){
                                u[i].style.position='absolute'; this.l++; u[i].o=p.visible?100:0;
                                u[i].style.opacity=u[i].o/100; u[i].style.filter='alpha(opacity='+u[i].o+')'
                        }
                }
                this.pos(p.position||0,this.a?1:0,p.visible)
        },
        fade.prototype.auto=function(){
                this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
        },
        fade.prototype.move=function(d,a){
                var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
        },
        fade.prototype.pos=function(i,a,v){
                var p=this.u[i]; this.z++; p.style.zIndex=this.z;
                clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;
                if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}
                if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}}
                p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20)
        },
        fade.prototype.fade=function(i,a){
                var p=this.u[i];
                if(p.o>=100){
                        clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}
                }else{
                        p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'
                }
        };
        return{fade:fade}
}();
//]]>
</script>
<style type='text/css'>
#demowrapper { /* rettangolo contenitore */
  margin: 0px auto;
  /* larghezza immagini + frecce + bordi */
  width: 580px;
}
.sliderbutton { /* frecce direzione */
  float: left;
  padding-top: 148px
  width: 32px;
}
.sliderbutton img { cursor:pointer; }
.sliderbutton img:hover { background: #666; }
#slideshow { /* rettangolo con le immagini */
  background-color :#000;
  border: 2px solid #FFF;
  float: left;
  height: 350px;
  width: 490px;
}
#slides { /*  immagini */
  list-style: none;
  margin: 0;
  height: 350px;
  overflow: auto;
  padding: 0;
  position: relative;
  width: 490px;
}
#slides li { /* elenco di immagini */
  height: 350px;
  width: 490px;
}
.pagination { /* pulsanti di navigazione */
  float: left;
  list-style: none;
  height: 25px;
  margin: 30px 0 0 32px;
}
.pagination li { /* elenco pulsanti navigazione */
  background: #000;
  border: 1px solid #666;
  color: #888;
  cursor: pointer;
  float: left;
  padding: 5px 8px;
  margin: 0 4px 0 0;
  text-align: center;
}
.pagination li:hover { border: 1px solid #FFF; color: #FFF; }
li.current { border: 1px solid #FFF; color: #FFF; }
</style>
<div id="demowrapper">
  <div>
    <!-- Freccia navigazione sinistra -->
    <div class="sliderbutton"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcd4LV3xxNfpXcIFhjp38zPbAtAtAEji5VznuK8rFX3S09EMPlH58P7c1RwC1IVA6jtjSwMxbVuEjuEYGUaenJGN_suTHseqUrt2pEv_FGt9WVIt24LyGQmlSHs4zLqS8OHW2Lf_oL_7M/s32-no/left2.png" onclick="slideshow.move(-1)" /></div>
    <div id="slideshow">
      <ul id="slides">
        <li><a href='#' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyfgAUaU10cLJbs6fIDMrKZO0w7b5Yz-ORXJWjmbt47OhgFHkoO5TgpVvJxdzSwNAj8X4Sze5E1xHCKojbktzgMCp1rMsdLLgNfvLFEjKh7-GcnSNxNf6mHCmjdVki_tvVuGNKWNiFuIGY/" /></a></li>
        <li><a href='#' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQGqEdh9XsatP2x2WPgaQU8SeuJag2AT7YBHmqcu4lphe4XtEDTbmGYmHje0KsjQH2oMrAF3uZf1bAPqSGRtxS6t6Basq1l70tJmA0bzNz3hso86g0nWqgFaRjhQyskajXbQH3JmZWMZi/" /></a></li>
        <li><a href='#' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-mT2l-yYpPW_kg2v3Fh-qxRH70yyELFU0idfmvycXyNqNE9E8hs-ne2JBUyiaaxdvodvt6M7D8nUgjzG-WtwsiRzWrJwEEyWksSPs_wm2PU6yfFmQtzoA1XkCkaFi04A-RkU-pg7jY6o/" /></a></li>
        <li><a href='#' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCV1nboTSFpH4myFLcGjiuAswfnU-iSbqVllKVAdSwMqw9Z5oHUQKx5_ud1Lmps-f58Hwnf2LJ3XNSI7V5YwGtIox6mDETOHHqW9DWiFWbE3zv48ExASQiQ3UBa_pu905-25Zdi17Ef0y5/" /></a></li>
        <li><a href='#' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYxgVAWmWTR5kO1wmHrV6zJzax5AGGLhhtPDwLvkD0AdyqNS2oW9AnkLTSpfCAoQq2PcVJRAltcu9MeR5MAwM4gOZV40dVomMD-wW7y6hldBHfJEtsTAxVordZM-mz343TgRqem3hxnxWm/" /></a></li>
        <li><a href='#' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuekgOykhiAad-ifYbMNuUuQyeqrFh6RSouDaUn2va8Bl20m4T0HWOAOAUlWYbSrZrqfrHRfw4_Ng-KLtjFa07WnjpZUwTz6_24MI9yGLH9_UIl3_7zJMj4AoQi7g2zDLMxwcvRyKqc1eL/" /></a></li>
        <!--elenchiamo tutte le altre immagini che vogliamo insieme ai link collegati  -->
      </ul>
    </div>
   <!-- Freccia di navigazione destra -->
    <div class="sliderbutton"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jC7_S5QwVwwYlO0B-yDGWQLrG_FhXjYUZCcLge9l_Msr137vTAkLj5lgKTMx7LQ-GZonLR6qVRI5Y46LxSgfDl6-1Cp3lFO2jJ_WUWpVvnjydXKxcWc8HoAfeccOYqbF4wb6_xcmZVQ/s32-no/right2.png" onclick="slideshow.move(1)" /></div>
  </div>
    <!-- Navigazione bassa -->
    <ul id="pagination" class="pagination">
    <li onclick="slideshow.pos(0)">1</li>
    <li onclick="slideshow.pos(1)">2</li>
    <li onclick="slideshow.pos(2)">3</li>
    <li onclick="slideshow.pos(3)">4</li>
    <li onclick="slideshow.pos(4)">5</li>
    <li onclick="slideshow.pos(5)">6</li>
    <!-- aggiungiamo altre righe quante sono le immagini -->
  </ul>
</div>
<script type="text/javascript">
  var slideshow=new TINY.fader.fade('slideshow',{ id:'slides', auto:3, resume:true, navid:'pagination', activeclass:'current', visible:true, position:0 });
</script>

Tale codice va incollato su Pagine > Nuova Pagina > HTML se si opta per una pagina statica

Se invece si preferisce un widget si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla in Sezioni del sito. Il titolo è opzionale per il widget mentre è obbligatorio per la pagina statica. Accanto a molti parametri del codice sono presenti dei commenti esemplificativi. Si può vedere lo slideshow nella Demo seguente: 

Demo
Clicca qui

La proposta è di 580 pixel come larghezza totale del contenitore ma per mostrare in alto entrambe le frecce nella Demo nella pagina statica l'ho dovuta aumentare a 600 pixel.  Questa larghezza deve essere maggiore o uguale alla somma della larghezza delle immagini (490 pixel quella proposta) e delle due frecce direzionali (32 pixel ciascuna). In taluni modelli dobbiamo aumentare ulteriormente la larghezza perché vengono aggiunti dei padding in modo automatico.

Le immagini debbono essere caricate su Picasa e il loro URL diretto va sostituito a quello delle immagini prese come esempio. Le altre personalizzazioni più rilevanti sono:

1. auto:3 - sono i secondi di permanenza di una immagine prima di passare alla successiva
2. resume:true - sostituire con false per far continuare lo slideshow dopo una interruzione
3. visible:true - mostra la prima immagine dello slideshow
4. position:0 - è il numero di ordine della prima immagine da visualizzare
5. Si possono aggiungere altre immagini unitamente alle rispettive righe da inserire con la stessa sintassi dopo la 6° evidenziata di giallo <li onclick="slideshow.pos(x)">x+1</li>.
6. I link ai post vanno inseriti al posto dei cancelletti #.