Semplice slideshow di immagini per Blogger ottenuto senza caricare javascript.

Vado a presentare uno slideshow semplicissimo che può essere installato su Blogger senza caricare file javascript su hosting esterni. Il concetto è quello di inserire delle immagini una di seguito all'altra e di visualizzare l'immagine che ci interessa mediante il click del mouse.

Nella parte bassa ci sono i pulsanti di navigazione per scorrere le diverse immagini. Bisogna prestare attenzione alla geometria. Se abbiamo sette foto larghe 500 pixel allora la sua dimensione complessiva sarà di 500x7=3500 pixel. C'è però il problema che alcuni modelli inseriscono dei bordi alle immagini in modo automatico. E' anche il caso del blog che ho usato per effettuare il test. La cosa varia ovviamente da template a template. Vedremo come ovviare a questo inconveniente alla fine dell'articolo. 

Per l'installazione si va su Design > Modifica HTML e si cerca la riga </head>. Immediatamente sopra si incolla il seguente codice

<!-- Simple Slideshow Start -->
<style>
#ImgBox {
    height: 375px;
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  #ImgIntBox{   
    position:absolute;
    left: 0;
    top: 0;  
    width: 3500px; /* Larghezza totale del widget da calibrare moltiplicando le larghezze delle immagini insieme a quelle eventuali dei bordi per il loro numero */    
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #ImgIntBoximg {
    height: 375px;
    width: 500px;
  }
  #ImgBoxLinks { 
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #ImgBoxLinks a {
    background-color: #334455;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #AABBCC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #ImgBoxLinks a:hover {
    box-shadow: 0 0 8px #AABBCC inset;
    color: #FFFFFF;
  }
</style>
<!-- Simple Slideshow End - www.ideepercomputeredinternet.com -->

Ho scelto 7 foto da 500x375 pixel, ma possono essere di qualsiasi dimensione. Il dato totale di 3500 pixel si riferisce a un modello senza bordi nelle immagini. La parte finale del codice dichiara lo stile dei pulsanti di navigazione per quello che riguarda la forma, la posizione (centrale) e i colori. Il tag border-radius ne determina l'arrotondamento. Si salva il modello. Dopo aver caricato le immagini su Picasa o altro hosting, dobbiamo andare su Design > Aggiungi un gadget > HTML/Javascript e incollare quest'altro codice (ho lasciato gli URL delle foto inserite come test)

<div id="ImgBox">
<div id="ImgIntBox">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgHpVusaEOHpRW9eyWVvpJP0D70agKJVvp1-hyLT384w-phlpjenAivm0fU5F_2Du14XX7XDk40-9iDzbeFLqQ26fYTTo5jN-q9gJvpMK3KS1Lf9hVg_fsMCdj-6uatzCJGPA6A2Txgo/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64331audmjXlWhUYoQRnRwsBJKO-0E7CXwbWhFjrblMlHE1L0x33Q_yuPaiapWcFVRXzVQvc2C72DJbcDWmMaRt4lvmuZTpHOCA_NeKcUO9Kch82pTRyZur5CkuxP05LSG05jhKW0WiY/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_0FLdNB03Z1xf_1jF_p0az1TyP6hpnIHo7QI5OCOlXZdm3W_6gr9_M4J5pQpNUznRdPKsfqTIHeTWF3r1ICJx53O4_OlXv0NJc5zXIV5R6LhuDQZ3tOgRm8icIH9dLkGD46jNNBS9Pws/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIWPrR89X1H8izJ7TLkkqPnWcZuXkhX8oahr162HQtANFVzTPOk1lCTCROkNo1c3jI0RPxQe55x8Y9V3HoE0kmMO0grvoqteqoMlxPtj7NnhXCbhDRyxixx_Ygp3XnTiFbG_id0Jr5UE/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSJOrODyTrfpinafVYqpUnyGlNPLoc_4Vd8Cj_ZJf04ZGPBtXFrRr4gTPurJzTHM5o2bCSNM57WxOQkmXESEmeuzoUjT8_5pobbHCcUzqt-9NZfIFtkiFvMYqiqUfmsaYIExrwYd4Cno/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vZ9mJudKlMRMWBT5Y_pumSUfHOrdUMBwxgE3zmWimmhK2a0YwqvtkdRwtIhk5U62nvgXyAtBV4DA4TdhfIxX7MQorNbVpZBPC8hGC_zE-EQb3eEuzr2SVHjbP3kAJnnO4NXPtwktsgo/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfF_LlX739M-SvcADDIiTg17-mQMnjHFVRhevLS2ETsAcOaS6GPUgcUOAdkomhTrNZK5LQS0wjIn2DevSlJCF0BGhbWQNalWDbM-3sYka2YN496iSvg3DVkOi-GQNI4ANuqpphp0Vonns/" />   
</div>
</div>
<div id="ImgBoxLinks">
  <a onclick="
srcImgBox(0);" href="javascript:void(0);">1</a>
  <a onclick="
srcImgBox(1);" href="javascript:void(0);">2</a>
  <a onclick="
srcImgBox(2);" href="javascript:void(0);">3</a>
  <a onclick="
srcImgBox(3);" href="javascript:void(0);">4</a>
  <a onclick="
srcImgBox(4);" href="javascript:void(0);">5</a>
  <a onclick="
srcImgBox(5);" href="javascript:void(0);">6</a>
  <a onclick="
srcImgBox(6);" href="javascript:void(0);">7</a>
</div>
<script>
//<![CDATA[
  function srcImgBox(num) {
    var mover = num * 500;    document.getElementById("ImgIntBox").style.left = -mover + "px";
  }
//]]>
</script>
<noscript><a href='http://goo.gl/eTetJ' target='_blank'><span style='font-size: x-small;'>Simple Slideshow</span></a></noscript>

Si clicca su Salva e si posiziona con il mouse nella sidebar, nel footer o in una pagina statica. Ecco lo slideshow che ho messo in rete

• Demo del Simple Slideshow -

Se si vogliono inserire un numero diverso di immagini, occorre semplicemente aggiungere una riga di questo genere

<img src="URL_IMMAGINE" />

Per questioni SEO sarebbe anche opportuno anche inserire il tag Alt, in questo modo

<img src="URL_IMMAGINE" alt="Nome_Immagine"/>

Per ogni immagine che viene aggiunta, bisogna inserire un'altra riga con questa sintassi

srcImgBox(x);" href="javascript:void(0);">x+1</a>

Nella demo ho sostituito il valore var mover = num * 500; con var mover = num * 504; per tenere conto dei due pixel di bordi inseriti a sinistra e a destra delle immagini. Al posto di 3500 ho invece messo 3528 come larghezza totale. Con questa modifica lo slideshow dovrebbe funzionare perfettamente anche nei modelli che inseriscono le immagini direttamente con i bordi. Se la loro dimensione è di un solo pixel mettete 502, optate per 506 nel caso di 3 pixel. Si deve naturalmente modificare anche la larghezza totale del widget in funzione delle spessore di eventuali bordi.