Slideshow di immagini senza librerie javascript esterne.

Slideshow di immagini senza javascript esterni ma solo con il css

Eccomi a illustrare l'ennesimo slideshow di foto da installare in un blog su Blogger. La particolarità di questo widget risiede nel fatto che non occorre caricare alcun file CSS o Javascript su un hosting esterno. In genere questi tipi di file li carico su i miei account Google Code, Google Sites con la modalità Schedario o DropBox e la possibilità che questi servizi vadano in blackout è remota. Però avere il totale controllo di tutto quello che si ha sul blog è sempre meglio.

Ci si reca su Design > Modifica HTML e si cerca la riga </head>. Immediatamente sopra si incolla questo codice che ho pubblicato su Google Documenti

• Codice dello Slideshow su Google Documenti -

Ho colorato di rosso i parametri più interessanti da modificare. Ho inoltre inserito dei commenti nei blocchi di codice per indicare a cosa si riferisca ciascuno di essi. IL dato più importante da considerare è che la larghezza totale del contenitore (560 nel codice proposto) deve essere maggiore o uguale alla somma della larghezza delle immagini (490 la misura proposta), delle due frecce direzionali (32 ciascuna) e dei bordi. Salvare il modello.

Adesso carichiamo le immagini su hosting quali Picasa, Skydrive o DropBox e incolliamo in Design > Aggiungi un gadget > HTML/Javascript un codice come questo in Sezione del <Sito 

<div id="demowrapper">
  <div>
    <!-- Freccia navigazione sinistra -->
    <div class="sliderbutton"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWmFigqgQQSEUuQDlxQtRmKCpbh8KTPQg9jyqJxLRFkdNM7aOZ-_Kx_f2El8334H-QCPTT1pv3ZCmRn9sXLTMvKN5501jbq-Wu3W4QtVWoDjLS8DLG_Rupd0Hr-pocCn1VQcusW7hXlGvI/" onclick="slideshow.move(-1)" /></div>
    <div id="slideshow">
      <ul id="slides">
        <li><img src="URL_IMMAGINE1" /></li>
        <li><img src="URL_IMMAGINE2" /></li>
        <li><img src="URL_IMMAGINE3" /></li>
        <li><img src="URL_IMMAGINE4" /></li>
        <li><img src="URL_IMMAGINE5" /></li>
        <li><img src="URL_IMMAGINE6" /></li>
        <!--elenchiamo tutte le altre immagini che vogliamo -->
      </ul>
    </div>
    <!-- Freccia di navigazione destra -->
    <div class="sliderbutton"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQUyMQVmebzEmmOTIM38SX0nZ5NyVfTXc8WGxAwvCjG_yhViQltqi4LBlQUb9Nxn_EAs245PT1BUrdTpa7t5mijQALgVgTtRWXpSW0HL5MqLKdeRHh17Qf_3JGn_hwLhxDG0bH0DqNEOT/" 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>

Le immagini delle frecce le ho già inserite ma possono essere sostituite con altre più intonate con i colori del blog. Bisogna sostituire gli hotlink delle foto a URL_IMMAGINE_X. Il risultato potrà essere visto in questo post di prova

• Demo Slideshow -

Si tratterà di una transizione da una immagine all'altra con annessi pulsante di navigazione bassi e frecce di navigazione alte che si visualizzano solo quando si puntano le immagini con il mouse

Ulteriori personalizzazioni

Nella parte finale del codice da inserire nell'elemento pagina ci sono dei parametri che possono essere modificati secondo le nostre esigenze

1. auto:3 - sono i secondi che permane la visione di una immagine prima di passare alla successiva
2. resume:true - inserire false se non si vuole che lo slideshow continui 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 quante immagini vogliamo unitamente alle rispettive righe da inserire con la stessa sintassi <li onclick="slideshow.pos(x)">x+1</li>

Fonte | Fading Javascript Slideshow -