Pubblicato il 15/03/11e aggiornato il

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à.

slisdeshow orizzontale per blogger

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://lh3.googleusercontent.com/_nT13UtBmmiU/TX9laWiejnI/AAAAAAAASbg/suuA7nnP0X0/sinistra.jpg&#39;, -48, 0], rightnav: [&#39;https://lh3.googleusercontent.com/_nT13UtBmmiU/TX9mBLH_OoI/AAAAAAAASbo/Te7EzCMZKG8/destra.jpg&#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





17 commenti :

  1. Fantastico! Appena ho una mezz'ora ci provo.
    Grazie Veggie

    RispondiElimina
  2. Grande post come sempre! Avrei solo una domanda: è possibile cambiare lo sfondo NERO in un altro colore o meglio ancora renderlo trasparente ?
    Saluti.

    RispondiElimina
  3. @Blog Citizens
    Devi sostituire questa immagine
    https://lh4.googleusercontent.com/_nT13UtBmmiU/TX9krf23-xI/AAAAAAAASbc/qAYH398xxUU/sfondo.jpg con un'altra di un altro colore. Dovresti anche cambiare gli URL delle trecce a destra e a sinistra
    L'immagine di sfondo si trova nel codice che ho postato in questo documento
    https://docs.google.com/document/pub?id=1Q1VmLSIFEOU036RqQUoz3tuziO7xli0KK-igQF7Ktic

    RispondiElimina
  4. Grazie anche per questo tutorial!
    Ti voglio chiedere una cosa, io faccio le slide nei miei post con Gimp dove le immagini si sovrappongono, c'è un modo o un programma, a parte le slide che trovi già in rete, che fanno le slide tipo questa che hai presentato tu, scorrevoli in orizzontale?
    Ti ringrazio vivamente per quanto ci regali ogni volta.

    RispondiElimina
  5. @♥Mary47♥ Non sono molto pratico di grafica :(

    RispondiElimina
  6. @Ernesto T. Grazie mille Ernesto. Problema risolto.

    RispondiElimina
  7. Sono molto belli questi slide... sapresti metter su qualcosa simile a quello che si vede in questo sito?
    http://www.coolpctips.com/

    RispondiElimina
  8. @SE-Gen Il sito è Wordpress e il menù è di tipo Accordion orizzontale
    http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/

    RispondiElimina
  9. Rapido come la luce a rispondermi! Dunque non c'è nulla di simile per blogger?
    Grazie ;)

    RispondiElimina
  10. Guarda se non sbaglio grazie al nome che mi hai dato su questo tipo di menu ho fatto una ricerca e ho trovato queto: http://www.blogspotvision.com/2009/12/smooth-and-versatile-horizontal.html

    potresti realizzare un articolo ;)
    Ciao ;)

    RispondiElimina
  11. @SE-Gen
    Ci penserò. Se avrò un po' di tempo e di voglia, senza impegno...

    RispondiElimina
  12. Certamente, ci mancherebbe altro ;)

    RispondiElimina
  13. @Ernesto T. ciao bell post
    una cosa che non ho capito! ma per caso lo slideshow e automatica
    o la devi muovere con il mause ?? grazie

    RispondiElimina
  14. @denny
    Deve essere navigato con il mouse

    RispondiElimina
  15. @CP
    Scusa se ti ho cancellato il commento ma tratti contenuti per adulti e il tuo avatar è troppo esplicito e non vorrei avere problemi con immagini non consentite. Ho visto il sito e
    al posto di URL_POST devi inserire l'indirizzo dei vari articoli a cui vuoi collegare le singole immagini.

    RispondiElimina
  16. Ernesto sei un grande, mi compiaccio per la mano che mi stai dando con i tuoi articoli, per migliorare il mio blog, sono un profano e all'inizio. Sarebbe fantastico se questa slide avesse la navigazione automatica, col blocco al passaggio del mouse.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.