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>
<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 slideshow con pulsanti navigazione](http://lh3.ggpht.com/_nT13UtBmmiU/TagBWlJI6NI/AAAAAAAAS2U/CJQb84IwOeM/slideshow%20con%20pulsanti%20navigazione%5B3%5D.jpg?imgmax=800)
Ulteriori personalizzazioni
Nella parte finale del codice da inserire nell'elemento pagina ci sono dei parametri che possono essere modificati secondo le nostre esigenze
- auto:3 - sono i secondi che permane la visione di una immagine prima di passare alla successiva
- resume:true - inserire false se non si vuole che lo slideshow continui dopo una interruzione
- visible:true - mostra la prima immagine dello slideshow
- position:0 - è il numero di ordine della prima immagine da visualizzare
- Si possono aggiungere quante immagini vogliamo unitamente alle rispettive righe da inserire con la stessa sintassi <li onclick="slideshow.pos(x)">x+1</li>
potrei metterlo nella pagina statica prima delle miniature?
RispondiElimina@Soffio di Dea
RispondiEliminaCerto che lo puoi fare. Devi riconoscere che materiale per gli slideshow ne ho fornito ^_^
@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! :*
RispondiEliminamm come lo si potrebbe avere senza i numeretti sotto di scorrimento?
RispondiElimina@RobertaDafne
RispondiEliminaProva a togliere tutto quello che va dalla riga
-- Navigazione bassa --
fino a
< /ul >
compreso e guarda un po' cosa viene fuori :)
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@RobertaDafne
EliminaPotresti 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.