Nel tempo libero mi piace "giocare" con jQuery, cercando magari di realizzare cose particolari e migliorare le mie competenze. L’ultima volta ho realizzato lo slideshow che vi presento in questo articolo: si tratta di una transizione molto pulita ed elegante che potete vedere seguendo il link.
DEMODOWNLOADEcco come l’ho realizzato.
HTML
La struttura è composta da una semplice lista di immagini, niente di particolare.
<div id="box_slider"> <ul id="slider"> <li><img src="images/low_img.jpg"></li> <li><img src="images/low_img1.jpg"></li> <li><img src="images/low_img2.jpg"></li> </ul> </div> <div id="bottoni"> <a href="#" id="prev" class="moveButton"></a> <a href="#" id="next" class="moveButton"></a> </div>
CSS
Anche il foglio di stile non presenta alcun che di particolare, le immagini hanno posizionamento assoluto rispetto al contenitore che è relativo, questo perché ho bisogno di metterle una sopra l’altra su livelli diversi.
#slider{
list-style: none;
margin: 0;
padding: 0;
width: 1002px;
height: 563.5px;
margin:55px auto;
position: relative;
}
#slider li{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
}
#slider li img{
width: 100%;
height: 100%;
}
.griglia{
width: inherit;
height: inherit;
position: relative;
}
.cella{
position: absolute;
}
jQUERY
Il cuore dello slideshow è proprio lo script jQuery, vediamo cosa succede.
Innanzitutto creo la struttura dello slideshow: le immagini non saranno altro che “griglie” formate da tante piccole celle, una sorta di puzzle. Questa divisione mi servirà durante la transizione vera e propria che vedremo tra poco.
Le immagini saranno a loro volta disposte l’una sopra l’altra su livelli diversi in base al valore dello z-index (la più superficiale avrà z-index = 99).
// variabili generali
var width = $('#slider').width();
var height = $('#slider').height();
var x = 0;
var count_img = 0;
// variabili griglia
var CELLE = 5; // valore percentuale
var CELLE_num = 100/CELLE;
var CELLE_larghezza = Math.round((width*CELLE)/100);
var CELLE_altezza = Math.round((height*CELLE)/100);
var cella_TOP = 0;
var cella_LEFT = 0;
var cella_BACKGROUND = '';
var zIndex = 99;
// riadatto grandezza contenitore, ci sarà un piccolo ridimensionamento
$('#slider li').width(CELLE_larghezza*CELLE_num);
$('#slider li').height(CELLE_altezza*CELLE_num);
// creo la struttura
$('#slider li').each(function(){
cella_TOP = 0;
cella_LEFT = 0;
cella_BACKGROUND = $(this).children('img').attr('src');
$(this).html('<div id="griglia'+count_img+'" class="griglia"></div>');
$('#griglia'+count_img).css('z-index',zIndex);
if(count_img == 0){
$('#griglia'+count_img).toggleClass('visible');
}
zIndex -= 10;
// creo la griglia di una immagine -> Si parte da quella più visibile
for (x = 0; x < CELLE_num*CELLE_num ; x++)
{
$('#griglia'+count_img).append(
'<div id="gr'+count_img+'cell'+x+'" class="cella cellgr'+count_img+'"></div>'
);
// gli applico dimensioni, posizioni e sfondo
$('#gr'+count_img+'cell'+x).width(CELLE_larghezza);
$('#gr'+count_img+'cell'+x).height(CELLE_altezza);
$('#gr'+count_img+'cell'+x).css('top',cella_TOP);
$('#gr'+count_img+'cell'+x).css('left',cella_LEFT);
$('#gr'+count_img+'cell'+x).css('background-image','url('+cella_BACKGROUND+')');
$('#gr'+count_img+'cell'+x).css('background-image','url('+cella_BACKGROUND+')');
$('#gr'+count_img+'cell'+x).css('background-position','-'+cella_LEFT+'px -'+cella_TOP+'px');
$('#gr'+count_img+'cell'+x).css('background-size',''+width+'px '+height+'px');
/*
incremento valori
--------------------------------------
dalla cella di su a quella di giù
e poi si passa alla colonna successive
*/
if ( Math.round(cella_TOP/CELLE_altezza) == CELLE_num-1 ){ cella_TOP = 0; cella_LEFT += CELLE_larghezza; }
else { cella_TOP += CELLE_altezza; }
}
count_img++;
});
Infine gestisco la transizione al click su uno dei due pulsanti: per prima cosa estraggo i riferimenti all’immagine attuale (quella che scomparirà) e a quella nuova, cioè quella successiva (+1) o precedente (-1) in base al bottone cliccato.
La transizione funziona in questo modo: partendo dall’angolo in alto a sinistra cancello (in realtà rendo trasparente) ogni singola cella muovendomi dall’alto verso il basso di ogni singola colonna.
Quindi dall’alto verso il basso cancellerò tutte le celle della prima colonna, poi passerò con lo stesso metodo alla seconda colonna e così via di seguito fino all’ultima.
Una volta terminato questo passaggio l’immagine che ormai non vediamo più è trasparente, ma sempre quella con lo z-index maggiore, quindi quella superficiale! Quindi cambio lo z-index portandola dietro e re-imposto l’opacità a 1. Tutto questo sarà ovviamente “nascosto” all’utente. Come ultimo passaggio aggiorno i valori delle schede per non avere problemi al prossimo click sui bottoni: all’immagine ora attuale assegno la classe visible e la tolgo a quella precedente.
$('.moveButton').click(function(e)
{
e.preventDefault();
var n_griglie = $('#slider li').length-1;
var count_celle = 0;
var y = 0;
// Passo da questa immagine...
var griglia_da = $('.griglia.visible').attr('id');
var griglia_da_id = parseInt(griglia_da.substring(7,griglia_da.length));
// ...A questa
if ($(this).attr('id') == 'next'){
var griglia_a_id = griglia_da_id+1;
if (n_griglie < griglia_a_id){griglia_a_id = 0;}
}
else if ($(this).attr('id') == 'prev'){
var griglia_a_id = griglia_da_id-1;
if (griglia_a_id < 0 ){griglia_a_id = n_griglie;}
}
var griglia_a = 'griglia'+griglia_a_id;
// metto la griglia di arrivo appena prima di quella attuale
$('#'+griglia_a).css('z-index',98);
var ritardo = 10;
var celle_cancellate = 0;
// animazione
for (y = 0; y<CELLE_num*CELLE_num;y++)
{
$('#gr'+griglia_da_id+'cell'+y).delay(ritardo).animate({'opacity':'0'},300,function()
{
celle_cancellate++;
if (celle_cancellate == (CELLE_num*CELLE_num)){
// se ho finito resetto tutto
$('.griglia').attr('class','griglia');
$('#'+griglia_a).toggleClass('visible');
$('#'+griglia_a).css('z-index',99)
$('#'+griglia_da).css('z-index',77)
$('.cella').css('opacity',1);
}
});
ritardo += 5;
};
});
Cosa ne pensi? Lascia un commento :)