Pubblicato il 15/03/11 - aggiornato il  | 17 commenti :

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. @Ernesto T. Grazie mille Ernesto. Problema risolto.

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

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

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

    RispondiElimina
  9. 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
  10. @SE-Gen
    Ci penserò. Se avrò un po' di tempo e di voglia, senza impegno...

    RispondiElimina
  11. @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
  12. @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
  13. 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.
Info sulla Privacy