Come creare uno slideshow di immagini completamente personalizzabile con la possibilità di inserire dei link ai post.
Gli slideshow sono degli elementi che mostrano in successione delle foto e sono particolarmente usati nei siti dei maggiori quotidiani online quando si voglia mostrare al lettore tutta la documentazione fotografica di un evento. In genere per realizzare uno slideshow si utilizzano delle librerie javascript come JQuery e simili che possono però diminuire la velocità di caricamento del sito.
Adesso vado a proporre uno slideshow fatto in casa senza nessuna risorsa esterna e che può essere controllato totalmente dal webmaster. Il javascript ovviamente esiste lo stesso ma sarà caricato nel modello e non si dovrà attingere a un link esterno che può sempre smettere di funzionare. Nella Demo che ho realizzato ho inserito sei immagini ma si può facilmente aumentare o diminuire questo numero.
La riproduzione è automatica ma ci sono anche i bottoni di navigazione per spostarsi da una immagine a un'altra. La galleria di foto può essere inserita in un gadget HTML/Javascript oppure anche in una pagina statica in Modalità HTML pubblicando direttamente senza andare su Scrivi.
Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca il tag </head>. Subito sopra a questa si incolla il seguente codice
<!--Slideshow Inizio-->
<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.fader=function(){
function fade(n,p){this.n=n; this.init(p)}
fade.prototype.init=function(p){
var s=T$(p.id), u=this.u=T$$('li',s), l=u.length, i=this.l=this.c=this.z=0;
if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0;
for(i;i<l;i++){
if(u[i].parentNode==s){
u[i].style.position='absolute'; this.l++; u[i].o=p.visible?100:0;
u[i].style.opacity=u[i].o/100; u[i].style.filter='alpha(opacity='+u[i].o+')'
}
}
this.pos(p.position||0,this.a?1:0,p.visible)
},
fade.prototype.auto=function(){
this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
},
fade.prototype.move=function(d,a){
var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
},
fade.prototype.pos=function(i,a,v){
var p=this.u[i]; this.z++; p.style.zIndex=this.z;
clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;
if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}
if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}}
p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20)
},
fade.prototype.fade=function(i,a){
var p=this.u[i];
if(p.o>=100){
clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}
}else{
p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'
}
};
return{fade:fade}
}();
//]]>
</script>
<style type='text/css'>
#demowrapper { /* rettangolo contenitore */
margin: 0px auto;
/* larghezza immagini + frecce + bordi */
width: 560px;
}
.sliderbutton { /* frecce direzione */
float: left;
padding-top: 148px
width: 32px;
}
.sliderbutton img { cursor:pointer; }
.sliderbutton img:hover { background: #666; }
#slideshow { /* rettangolo con le immagini */
background-color :#fff;
border: 2px solid #fff;
float: left;
height: 350px;
width: 490px;
}
#slides { /* immagini */
list-style: none;
margin: 0;
height: 350px;
overflow: auto;
padding: 0;
position: relative;
width: 490px;
}
#slides li { /* elenco di immagini */
height: 350px;
width: 490px;
}
.pagination { /* pulsanti di navigazione */
float: left;
list-style: none;
height: 25px;
margin: 30px 0 0 32px;
}
.pagination li { /* elenco pulsanti navigazione */
background: #000;
border: 1px solid #666;
color: #aaa;
cursor: pointer;
float: left;
padding: 5px 8px;
margin: 0 4px 0 0;
text-align: center;
}
.pagination li:hover { /* Pulsanti al passaggio del cursore */
border: 1px solid #FFF; color: #FFF; }
li.current { border: 1px solid #FFF; color: #FFF; }
</style>
<!-- Slideshow Fine -->
<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.fader=function(){
function fade(n,p){this.n=n; this.init(p)}
fade.prototype.init=function(p){
var s=T$(p.id), u=this.u=T$$('li',s), l=u.length, i=this.l=this.c=this.z=0;
if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0;
for(i;i<l;i++){
if(u[i].parentNode==s){
u[i].style.position='absolute'; this.l++; u[i].o=p.visible?100:0;
u[i].style.opacity=u[i].o/100; u[i].style.filter='alpha(opacity='+u[i].o+')'
}
}
this.pos(p.position||0,this.a?1:0,p.visible)
},
fade.prototype.auto=function(){
this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
},
fade.prototype.move=function(d,a){
var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
},
fade.prototype.pos=function(i,a,v){
var p=this.u[i]; this.z++; p.style.zIndex=this.z;
clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;
if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}
if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}}
p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20)
},
fade.prototype.fade=function(i,a){
var p=this.u[i];
if(p.o>=100){
clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}
}else{
p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'
}
};
return{fade:fade}
}();
//]]>
</script>
<style type='text/css'>
#demowrapper { /* rettangolo contenitore */
margin: 0px auto;
/* larghezza immagini + frecce + bordi */
width: 560px;
}
.sliderbutton { /* frecce direzione */
float: left;
padding-top: 148px
width: 32px;
}
.sliderbutton img { cursor:pointer; }
.sliderbutton img:hover { background: #666; }
#slideshow { /* rettangolo con le immagini */
background-color :#fff;
border: 2px solid #fff;
float: left;
height: 350px;
width: 490px;
}
#slides { /* immagini */
list-style: none;
margin: 0;
height: 350px;
overflow: auto;
padding: 0;
position: relative;
width: 490px;
}
#slides li { /* elenco di immagini */
height: 350px;
width: 490px;
}
.pagination { /* pulsanti di navigazione */
float: left;
list-style: none;
height: 25px;
margin: 30px 0 0 32px;
}
.pagination li { /* elenco pulsanti navigazione */
background: #000;
border: 1px solid #666;
color: #aaa;
cursor: pointer;
float: left;
padding: 5px 8px;
margin: 0 4px 0 0;
text-align: center;
}
.pagination li:hover { /* Pulsanti al passaggio del cursore */
border: 1px solid #FFF; color: #FFF; }
li.current { border: 1px solid #FFF; color: #FFF; }
</style>
<!-- Slideshow Fine -->
Si salva il modello. Successivamente si deve creare lo slideshow scegliendo le immagini e caricandole su Google+ per avere poi il loro link diretto. Successivamente si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice
<div id="demowrapper">
<div>
<!-- Freccia navigazione sinistra -->
<div class="sliderbutton"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcd4LV3xxNfpXcIFhjp38zPbAtAtAEji5VznuK8rFX3S09EMPlH58P7c1RwC1IVA6jtjSwMxbVuEjuEYGUaenJGN_suTHseqUrt2pEv_FGt9WVIt24LyGQmlSHs4zLqS8OHW2Lf_oL_7M/s32-no/left2.png" 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/AVvXsEg7jC7_S5QwVwwYlO0B-yDGWQLrG_FhXjYUZCcLge9l_Msr137vTAkLj5lgKTMx7LQ-GZonLR6qVRI5Y46LxSgfDl6-1Cp3lFO2jJ_WUWpVvnjydXKxcWc8HoAfeccOYqbF4wb6_xcmZVQ/s32-no/right2.png" 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/AVvXsEgcd4LV3xxNfpXcIFhjp38zPbAtAtAEji5VznuK8rFX3S09EMPlH58P7c1RwC1IVA6jtjSwMxbVuEjuEYGUaenJGN_suTHseqUrt2pEv_FGt9WVIt24LyGQmlSHs4zLqS8OHW2Lf_oL_7M/s32-no/left2.png" 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/AVvXsEg7jC7_S5QwVwwYlO0B-yDGWQLrG_FhXjYUZCcLge9l_Msr137vTAkLj5lgKTMx7LQ-GZonLR6qVRI5Y46LxSgfDl6-1Cp3lFO2jJ_WUWpVvnjydXKxcWc8HoAfeccOYqbF4wb6_xcmZVQ/s32-no/right2.png" 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>
Si salva e si posiziona a piacere. Non ho testato ma non ci dovrebbero essere problemi ad inserire questo codice anche in una pagina statica in Modalità HTML. Come ricordato in precedenza in questo caso è consigliabile pubblicare o aggiornare senza tornare su Scrivi.
COME PERSONALIZZARE LO SLIDESHOW
Nel primo codice si configura l'aspetto complessivo dello slideshow. Sono stati scelti 560 pixel per la larghezza totale dello slideshow, 490 pixel per la larghezza delle immagini e 32 pixel per quella delle frecce direzionali visibili in alto a sinistra e a destra delle immagini. Gli altri parametri più interessanti da modificare riguardano essenzialmente i codici dei colori degli elementi e quelli degli sfondi.
Nel secondo codice oltre a inserire l'indirizzo web delle immagini da visualizzare si possono cambiare le icone delle frecce di navigazione. Si possono anche settare i parametri della riproduzione
- auto:3 - sono i secondi di permanenza di una immagine prima di passare alla successiva
- resume:true - mettere false se non si vuole che lo slideshow continui dopo una interruzione
- visible:true - mostra la prima immagine dello slideshow
- position:0 - si può scegliere il numero d'ordine della prima immagine da visualizzare
Per rendere più chiaro come inserire altre immagini oltre alle sei proposte vi mostro come aggiungere una settima visto che poi si può usare la stessa sintassi anche per aggiungerne altre. Subito sopra alla riga
<!--elenchiamo tutte le altre immagini che vogliamo -->
si incolla questa nuovo codice
<li><img src="URL_IMMAGINE7" /></li>
mentre subito sopra alla riga
<!-- aggiungiamo altre righe quante sono le immagini -->
si incolla quest'altro codice
<li onclick="slideshow.pos(6)">7</li>
Da notare la diversa numerazione visto che nel javascript si parte dal numero 0. Concludo ricordando che volendo si possono inserire dei collegamenti nelle immagini con questa sintassi
Interessante!!
RispondiElimina