Slideshow di immagini in orizzontale con strumenti di navigazione.

Era diverso tempo che volevo presentare questo widget realizzato da Anshul, mi sono finalmente deciso dopo che ho visto il grande interesse che suscitano gli slideshow orizzontali con collegamento a pagine web. Ho apportato delle piccole modifiche e ho caricato gli script su un mio spazio per questioni di affidabilità.

Il widget per Blogger si chiama Image Slider Carousel e per la sua installazione si procede in questo modo. Si va su Design > Modifica HTML e si salva il modello completo. Si espandono i modelli widget e si cerca la riga  </head>, immediatamente sopra si incolla il seguente codice

<!--SLIDESHOW CAROUSEL INIZIO-->
<script src='https://sites.google.com/site/scriptperilblog/slideshow/slider.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<style type='text/css'>
#mygallery{overflow: hidden;}
</style>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons:{enable:true,moveby:4,leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzjGMB0DcdUYhS0xMK0iFFw_rzyRj-bUxv3Ub-kMCqeuPN08jyzUvfL-bVnIPXVrOtKvGDLCJA8vaz3WcPqhRO6ZqZGA9in2_GfqGeRAN5Nr0dW8kptW_pZI61KFmAlyb8tZIIXaL25kr/&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTwNAT6BDOY4rv59laG8PpIPrUxF9CeFbtORoi4tbZOlCW4VGCtRelKEloRx1Gvp4AH69AmoHv94y5HckY0kzGvcYrjifKZeeXj5qFyVMWXE1Z5ujJL9JUJXNpKXsKccbf9b1DKPv9ilU/&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>
<noscript><a href='http://goo.gl/gnhug' target='_blank'><span style='font-size: x-small;'>Image Slider Carousel</span></a></noscript>
<!--SLIDESHOWW CAROUSEL FINE - www.ideepercomputeredinternet.com-->

Quindi si cerca la riga ]]></b:skin> e immediatamente sopra si incolla quest'altro codice che ho messo in un file di Google Documenti. Si possono personalizzare le dimensioni del widget adattandole a quelle del nostro template e facendo in modo che si riescano a vedere in modo completo le miniature delle immagini che vengono inserite. Nel primo codice si possono variare, oltre che le immagini delle frecce di navigazione, anche il parametro speed:500 che rappresenta la velocità dello slideshow e moveby: 4 che invece indica quante miniature devono essere mostrate. Se si aumentano le dimensioni del widget dovrà essere aumentato anche questo numero e viceversa.

Lo slideshow si applica su Design > Aggiungi un gadget > HTML/Javascript incollando un codice che abbia questa struttura

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt"> 
<!-- 1° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!--1° Immagine Fine  --> 
<!-- 2° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!-- 2° Immagine Fine --> 
<!-- 3° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!-- 3° Immagine Fine --> 
<!-- 4° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!-- 4° Immagine Fine --> 
<!-- 5° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!-- 5° Immagine Fine --> 
<!-- 6° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!-- 6° Immagine Fine --> 
<!-- 7° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!-- 7° Immagine Fine --> 
<!-- 8° Immagine -->
<div class="panel">
<a href="URL_POST" target="blank" title="TITOLO_POST"> <img width="160" alt="NOME_IMMAGINE" src="URL_IMMAGINE" height="110" /> </a>
</div>
<!-- 8° Immagine Fine --> 
</div></div></div>

Mi sono limitato all'inserimento di 8 immagini con i relativi link ma se ne possono mettere quante se ne vuole. Ho evidenziato di rosso i parametri che vanno sostituiti e che sono

1. URL_POST: l'indirizzo della pagina web collegata all'immagine
2. TITOLO_POST: Il titolo del post che sarà visualizzato quando ci si punterà sopra con il mouse
3. width="160" e height="110" che sono rispettivamente la larghezza e l'altezza delle miniature e che devono essere commisurate ai dati inseriti nel codice precedente.
4. NOME_IMMAGINE serve ai fini SEO e indica il testo alternativo attraverso il tag Alt.
5. URL_IMMAGINE è l'indirizzo dell'immagine che è stato ricavato dal servizio su cui è stata caricata: Picasa, SkyDrive, DropBox, ecc

Si salva l'elemento e si posiziona preferibilmente sotto l'intestazione del blog

• Demo dello Slideshow Orizzontale Carousel -