Pubblicato il 15/04/11 - aggiornato il  | 7 commenti :

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
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
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
slideshow con pulsanti navigazione
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 -


7 commenti :

  1. potrei metterlo nella pagina statica prima delle miniature?

    RispondiElimina
  2. @Soffio di Dea
    Certo che lo puoi fare. Devi riconoscere che materiale per gli slideshow ne ho fornito ^_^

    RispondiElimina
  3. @Ernesto T. eh sì ne hai dato tanto... ma questo mi piace più di tutti... perché è leggero, fluido... tanto se lo metto nella pagina statica non mi servono link o rimandi, è solo una sorta di presentazione. Grazie! :*

    RispondiElimina
  4. mm come lo si potrebbe avere senza i numeretti sotto di scorrimento?

    RispondiElimina
  5. @RobertaDafne
    Prova a togliere tutto quello che va dalla riga
    -- Navigazione bassa --
    fino a
    < /ul >
    compreso e guarda un po' cosa viene fuori :)

    RispondiElimina
    Risposte
    1. grazie mille! ancora una cosa, sperando di non rompere >.< Purtroppo mi viene tutto incasinato, sovrapposto sul blog, sono una capra..pur seguendo i punti, non viene come dovrebbe..

      Elimina
    2. @RobertaDafne
      Potresti provare a cambiare questo codice
      https://docs.google.com/document/pub?id=1dF6wHJqb7uUhrnkbENgqvURwWtOlqJSoeXIRJZCPq1k solo nella parte che riguarda i CSS ma mi pare una cosa non semplice.

      Elimina

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