Partendo dal post precedentemente realizzato da me, riguardante la realizzazione di un Thumbnail Slider, in questa puntata tratteremo la creazione di uno Slider Nivo, la cui principale caratteristica è quella di avere una transizione grafica, da una immagine alla seguente, con effetto di dissolvenza, giocando sull’opacità degli elementi.
Inoltre, tratteremo la gestione di una navigazione alternativa alle frecce, ossia una navigazione con dei “pallini” che potranno portare la visualizzazione dello slider direttamente all’immagine selezionata.
Struttura Html di base
L’html del nostro Slider Nivo, sarà praticamente il medesimo di quello realizzato per il precedente slider.
[html]
<section class="nivo-slider">
<div class="navi"></div>
<a class="prev" href="javascript:void(0);">«</a>
<a class="next" href="javascript:void(0);">»</a>
<div id="nivo"></div>
</section>
[/html]
Eccezione fatta per l’aggiunta di un div class=”navi” che sarà il contenitore dei nostri pallini per navigare rapidamente tra le immagini.
Proprietà Css necessarie
Le regole css del nostro Slider Nivo serviranno per posizionare il nostro navigatore a pallini e per posizionare le nostre immagini o i nostri elementi uno sopra l’altro in modo tale da poter permettere, con l’animazione javascript, il fadein e il fadeout dei nostri elementi.
Il contenitore principale sarà la section class=”nivo-slider” che sarà il contenitore di tutti gli elementi: slider, frecce e navigazione a pallini.
[css]
.nivo-slider{
position:relative;
margin: 30px auto 0;
width:620px;
height: 460px;
}
[/css]
Al suo interno avremmo appunto, le frecce a class=”prev” e a class=”next” che saranno posizionate in modo assoluto rispetto al contenitore.
[css]
.prev{
position: absolute;
top: 185px;
left: -40px;
cursor: pointer;
color:#000;
font-size:50px;
line-height:normal;
text-decoration:none;
}
.next{
position: absolute;
top: 185px;
line-height:normal;
right: -40px;
cursor: pointer;
color:#000;
font-size:50px;
text-decoration:none;
}
[/css]
Lo slider div id=”nivo” verrà posizionato in modo relativo, e a sua volta conterrà gli elementi posizionati in modo assoluto rispetto ad esso. Essi saranno gli elementi su cui verrà applicata l’animazione javascript. Questi ultimi, saranno posizionati uno sopra l’altro, top:0; left:0; avranno dimensione fissa e, condizione importante per il corretto funzionamento, opacity:0;.
[css]
#nivo{
position: relative;
overflow: hidden;
width: 620px;
height: 460px;
}
#nivo .element {
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 460px;
zoom: 1;
}
#nivo .slide1 {
background-image: #4e4e48;
background-image: linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
}
#nivo .slide2 {
background-image: #6a7259;
background-image: linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
}
#nivo .slide3 {
background-image: #70415c;
background-image: linear-gradient(bottom, #ff2b1f 0%, #5297f5 100%, #000000 100%);
}
#nivo .slide4 {
background-image: #606088;
background-image: linear-gradient(left, #fcff99 0%, #2422ff 100%, #000000 100%);
}
#nivo .slide5 {
background-image: #044a29;
background-image: linear-gradient(top left, #0cdd7c 0%, #000000 80%, #000000 100%);
}
[/css]
Per quanto riguarda i pallini, il div class=”navi” avrà posizione assoluta rispetto alla section class=”nivo-slider”. In questo caso li ho posizionati in basso a destra sotto gli elementi, e li ho anche affiancati utilizzando float:left;.
[css]
.navi{ position:absolute; top:auto; bottom:-20px; z-index:300; right:0; }
.navi a{
display:block;
background:#000;
border-radius:10px;
border:none;
width:11px;
height:11px;
text-indent:-999em;
overflow:hidden;
margin:8px 5px 0 0;
cursor:pointer;
float:left;
}
.navi a.active, .navi a:hover{ background-color:red; }
[/css]
I pallini avranno come stato active e hover un colore differente. Per stato active si intende quando il codice javascript assegna al pallino corrente una classe “.active”.
Codice Javascript/jQuery
Analizziamo ora il codice realizzato per ottenere il nostro Slider Nivo. Nella prima parte dichiariamo le variabili che ci serviranno nel corso del nostro script, tra cui il numero degli elementi, una variabile contatore e una variabile per prevenire molteplici istanze di click.
[js]
var nEle = $(‘#nivo .element’).size(),
i = 1,
counter = 1,
squareT = 0,
move = false;
[/js]
Prima di analizzare le funzioni facciamo un salto al codice che parte dal commento “//start and autoplay”, poiché alcune di queste istruzioni ci serviranno per capire poi il funzionamento delle funzioni definite.
Le condizioni necessarie per il funzionamento dello slider, sono posizionate sotto appunto questo commento. Esse consistono nello stampare un pallino per ogni elemento dello Slider Nivo tramite un “.each”, (nella quale assegneremo anche un attributo html rel=”” con valore crescente che ci servirà successivamente per la navigazione a pallini), mettere ad opacità a 0 tutti gli elementi, mettere il primo elemento a opacità 1 e aggiungere la classe “.active” al primo pallino.
[js]
//start and autoplay
$(‘#nivo .element’).each(function() {
$(‘.nivo-slider .navi’).append(”);
i = i+1;
});
$(‘#nivo .element’).css({ opacity:"0", filter:"alpha(opacity=0)"});
$(‘#nivo .element:first-child’).css({ opacity:"1", filter:"alpha(opacity=100)"});
$(‘.nivo-slider .navi a:first-child’).addClass(‘active’);
[/js]
Successivamente compare l’autoplay che effettuerà il fading a intervalli di 5 secondi, gli eventi sulle frecce che applicheranno fading o fadingReverse al click, e le istruzioni da eseguire al momento del click su di un pallino. Per questi ultimi la prima istruzione, preleverà tramite un parseInt il valore dell’attributo rel=”” che ci servirà nella funzione fadingSquares per poter selezionare uno specifico elemento della lista.
[js]
var autoplayFade = setInterval(function() {
fading();
},5000);
$(‘.prev’).click(function() {
fadingReverse();
clearInterval(autoplayFade);
});
$(‘.next’).click(function() {
fading();
clearInterval(autoplayFade);
});
$(‘.navi a’).click(function() {
squareT = parseInt(($(this).attr(‘rel’)));
fadingSquares();
clearInterval(autoplayFade);
});
[/js]
Dopodiché definiamo le istruzioni per effettuare il movimento di Fading normale, Fading Reverse (quando clicchiamo sulla freccia “prev”), e il Fading per la navigazione a pallini. La prima funzione di Fading non farà nient’altro che, il fadeout sull’immagine corrente, ovvero porterà l’opacità dell’elemento da 1 a 0, toglierà la classe “.active” al pallino corrente e la metterà a quello successivo, e infine creerà la transizione di opacità inversa sull’elemento che segue (da 0 a 1). Tutto questo verrà effettuato mentre la variabile move passerà da false a true, questo per non incorrere in molteplici istanze di click da parte dell’utente.
[js]
fading = function() {
if (move) { return false; }
move = true;
$(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
opacity:’0′
}, 800);
$(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).removeClass(‘active’);
if ( counter == nEle ) {
counter = 0;
}
$(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + ( counter + 1 ) + ‘)’).addClass(‘active’);
$(‘#nivo’).find(‘.element:nth-child(‘ + ( counter + 1 ) + ‘)’).animate({
opacity:’1′
}, 800, function() {
move = false;
}
);
counter = counter + 1;
}
[/js]
La seconda funzione di Fading (reverse) effettettuerà esattamente la stessa animazione precedente al contrario. Quindi avremo che l’elemento attuale andrà sempre in fadeout mentre sarà l’elemento che precede ad effettuare il fadein. Entrambe le funzioni sono accomunate dal fatto che, quando la variabile counter arriverà al limite superiore o al limite inferiore, la posizione verrà riportata all’elemento iniziale o all’elemento in coda, a seconda se si tratti della funzione di Fading normale o reverse.
[js]
fadingReverse = function() {
if (move) { return false; }
move = true;
$(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
opacity:’0′
}, 800);
$(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).removeClass(‘active’);
if ( counter == 1 ) {
counter = nEle+1;
}
$(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + ( counter – 1 ) + ‘)’).addClass(‘active’);
$(‘#nivo’).find(‘.element:nth-child(‘ + ( counter – 1 ) + ‘)’).animate({
opacity:’1′
}, 800, function() {
move = false;
}
);
counter = counter-1;
}
[/js]
La funzione fadingSquares non farà nient’altro che ricevere la posizione del pallino su cui abbiamo cliccato, effettuare il fadeout dell’elemento attuale, spostarsi alla posizione ricevuta dal pallino ed effettuare il fadein su quell’elemento.
[js]
fadingSquares = function() {
if (move) { return false; }
move = true;
$(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
opacity:’0′
}, 800);
$(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).removeClass(‘active’);
counter = squareT;
$(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).addClass(‘active’);
$(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
opacity:’1′
}, 800, function() {
move = false;
}
);
};
[/js]
Ecco una demo del Nivo Slider realizzata da me.
