jQuery, come altri framework javascript, ci dà la possibilità di poter realizzare strutture grafiche ad hoc, senza dover per forza ricorrere all’utilizzo di un plugin. In questo intervento analizzeremo come creare un Thumbnail Slider, ossia una struttura composta da un carousel di elementi, controllati da una navigazione a frecce totalmente circolare e quindi navigabile sia da destra verso sinistra che viceversa.
Struttura Html di base
La struttura html da predisporre per il funzionamento e la realizzazione del nostro Thumbnail Slider, è piuttosto semplice:
[html]
<div class="thumbs-container"><a class="slide-arrow sx-arrow" href="javascript:void(0);">Left</a>
<a class="slide-arrow dx-arrow" href="javascript:void(0);">Right</a>
<div id="thumbs">
<ul class="thumbs-wrapper clearfix">
<li class="thumb">…</li>
<li class="thumb">…</li>
<li class="thumb">…</li>
<li class="thumb">…</li>
<li class="thumb">…</li>
<li class="thumb">…</li>
<li class="thumb">…</li>
</ul>
</div>
</div>
[/html]
Il <div class=”thumbs-container”> ci servirà principalmente per poter posizionare correttamente le frecce. Il tag <div id=”thumbs”> sarà l’elemento che determinerà le dimensioni effettive del nostro slider, sostanzialmente servirà per delimitare la porzione che sarà visibile nella nostra pagina.
Il contenitore <ul class=”thumbs-wrapper”> sarà, invece, il carousel contenente le nostre anteprime (<li class=”thumb”></li>). Le frecce ci permetteranno di poter scorrere il nostro slider a nostro piacimento. Potranno essere skinnate e personalizzate a nostro piacimento via Css.
Proprietà Css utilizzate
[css]
.thumbs-container{
position:relative;
width:540px;
height:360px;
margin-left:150px;
}
.thumbs-container .slide-arrow{
display:block;
width:64px;
height:96px;
position:absolute;
top:70px;
left:-70px;
}
.thumbs-container .slide-arrow.dx-arrow{
left:auto;
right:-85px;
}
#thumbs{
width: 540px;
height: 360px;
overflow: hidden;
position: relative;
}
.thumbs-wrapper{
position: absolute;
width: 3000em;
top: 0;
left: 0;
}
.thumbs-wrapper .thumb {
float: left;
width: 160px;
height: 100px;
margin: 30px 30px 0 0;
background-color:red;
}
[/css]
Per quanto riguarda le regole css, sarà importante impostare al nostro <div id=”thumbs”></div> posizione relativa, dimensioni fisse e overflow hidden, in modo tale da creare una vera e propria sezione delimitata che nasconda gli elementi all’esterno di essa.
Il nostro “wrapper” dovrà avere posizione assoluta e dimensioni molto grandi, questo perché dovrà scorrere orizzontalmente e dovrà poter contenere un qualsiasi numero di thumbs. Le “thumbs” dovranno avere float:left e dimensione fissa e di conseguenza il suo contenitore (in questo caso proprio il nostro wrapper) dovrà prevedere una classe clearfix o comunque delle regole css per una corretta visualizzazione crossbrowser, di elementi allineati con float.
Le frecce avranno sempre posizione assoluta e si potranno posizionare a piacimento. Ovviamente dovranno essere posizionate al di fuori della struttara per lo slider, poiché essendo posizionate ai lati di esso, nel caso le inserissimo dentro il div con id=”thumbs” verrebbero tagliate dal contenitore stesso per via delle sue regole css.
Codice Javascript/jQuery
Veniamo ora alla parte principale di questo intervento. Innanzitutto dichiariamo le variabili che ci serviranno nel corso di questo script, perciò preleviamo la larghezza delle thumb (in questo caso specifico larghezza + margine sinistro), il wrapper, una variabile di controllo per prevenire molteplici istanze di click e il punto di partenza che verrà ricavato come larghezza delle thumb moltiplicata per il numero delle thumb stesse.
[js]
var width = -($(‘.thumbs-wrapper li’).outerWidth() + (parseInt($(‘.thumbs-wrapper li’).css(‘marginRight’)))),
slider = $(‘.thumbs-wrapper’),
move = false,
start = width*($(‘.thumbs-wrapper’).find(‘.thumb’).size());
$(‘.thumbs-wrapper’).find(‘.thumb’).clone().addClass(‘cloned’).appendTo($(‘.thumbs-wrapper’));
$(‘.thumbs-wrapper’).find(‘.thumb.cloned’).clone().addClass(‘cloned’).insertBefore($(‘.thumbs-wrapper .thumb:first-child’));
slider.css("left", start + "px");
$(‘.sx-arrow’).click(function(){
if (!move) {
move = true;
slider.animate({
left: ‘-=’ + width
}, function() {
if ( parseInt(slider.css(‘left’)) == 0 ) {
slider.css("left", start + "px");
}
move = false;
}
);
};
})
$(‘.dx-arrow’).click(function(){
if (!move) {
move = true;
slider.animate({
left: ‘+=’ + width
}, function() {
if ( parseInt(slider.css(‘left’)) == 2 * start ) {
slider.css("left", start + "px" );
};
move = false;
}
)
};
});
[/js]
A questo punto bisogna pensare di predisporre una struttura che dia la possibilità di navigazione circolare del nostro slider, ovvero dare la possibilità all’utente di poter scorrere le thumbnail orizzontalmente senza mai concludere il ciclo di rotazione. Per farlo basterà copiare le nostre thumbs due volte, ed inserire la prima copia in coda ad esse e la seconda copia posta prima di esse, in modo tale da “circondare” le nostre thumbs sia a destra che a sinistra. Utilizzeremo la funzione di jQuery clone() per clonare gli elementi, appendTo() per inserire la prima copia in coda e insertBefore() per inserire la seconda copia “in cima” al contenitore.
Step successivo sarà quello di realizzare il movimento orizzontale, utilizzando l’evento click() che verrà applicato alle nostre frecce. All’interno di esso utilizzeremo la funzione animate() di jQuery per poter agire sul left del nostro wrapper e creare l’effetto di movimento. Per prima cosa si controllerà che lo slider non sia in movimento (variabile “move”), se la condizione è verificata si valorizza subito a true e poi verrà riportata a false al complete della funzione animate(), ossia nel momento esatto in cui lo spostamento di una thumb sia concluso, questo per poter prevenire molteplici istanze di click. Dopodiché si attiverà l’animazione spostando il left del wrapper in modo positivo o negativo a seconda della freccia su cui abbiamo cliccato e sempre al complete dell’animazione effettueremo un controllo che differirà sempre in base alla freccia cliccata. Per la freccia di destra si controllerà sostanzialmente se il left del nostro wrapper è uguale a due volte il punto di partenza iniziale. Tradotto: se siamo arrivati al primo elemento della lista clonata posta in coda alle nostre thumbs il left viene riposizionato al punto di partenza. Stesso discorso vale per la freccia di sinistra, ma il nostro punto di arrivo in questo caso sarà a left=0, cioè quando capitiamo sul primo elemento clonato della nostra lista. Così facendo ogniqualvolta capitiamo sull’ultimo elemento delle thumbs clonate in coda o sul primo elemento delle thumbs clonate in cima, lo stato viene riportato alla situazione iniziale.
Per maggiore chiarezza, su jsfiddle.net, è possibile visualizzare una semplice demo realizzata da me.
