Dividere le immagini in CSS e jQuery - Parte ||

jQueryTutorial

Nel primo articolo abbiamo visto come creare la pagine HTML e le impostazioni del foglio di stile e potete recuperare il tutto dal qui.

Dividere le immagini in CSS e jQuery

Arrivati a questo punto manca il codice jQuery che ci permette di assegnare l'animazione voluta.

window.onload = function (){
var nomeImm = ''; // immagine corrente
var mode_current = ''; // modalità corrente
var setting =
{ // mode_tab : [row,cols,width,height]
// mode : [background_position]
'griglia_tab' : ['2','2','200px','200px'],
'griglia' : ['0px 0px','200px 0px', '0px 200px','200px 200px'],
'verticale_tab' : ['1','3','133px','400px'],
'verticale': ['0px 0px','266px 0px','133px 0px'],
'orizzontale_tab' : ['3','1','400px','133px'],
'orizzontale' : ['0px 0px','0px 266px','0px 133px']
}
$('#footer ul li img').mouseenter(function(){
$(this).stop().animate({'opacity':'1'},200);
});
$('#footer ul li img').mouseleave(function(){
$(this).stop().animate({'opacity':'0.7'},200);
});
$('#footer ul li').click(function()
{
changeImage($(this).children('img').attr('src'));
});
$('.mode').click(function()
{ changeMode($(this).attr('id'));
});
// default
mode_current = 'griglia';
changeMode('griglia');
changeImage('');
function changeImage(nomeImmagine)
// cambio l'immagine
{
if (nomeImmagine == ''){ nomeImm = 'dividere_immagini/Pearly Water.jpg';
// immagine di default
}
else
{
nomeImm = nomeImmagine;
}
i=0;
var width= setting[mode_current+'_tab'][2];
// width di .block
var height = setting[mode_current+'_tab'][3];
// height di .block
// riempio blocchi --> CICLO FONDAMENTALE
$('#imm_divisa ul li').each(function()
{
$(this).html('
'+nomeImm+'');background-position:'+setting[mode_current][i]
+';width:'+width+';height:'+height+';">
');
i++;
});
}
function changeMode(mode) // cambia modalità
{
var i =0;
$('#imm_divisa ul').stop().animate({'opacity':0},0);
// genero blocchi in base al tipo di divisione
var cols= setting[mode+'_tab'][0];
var rows = setting[mode+'_tab'][1];
var blochi;
$('#imm_divisa ul').html('');
for (i=0; i)
{
$('#imm_divisa ul').append('');
}
mode_current = mode;
changeImage(nomeImm);
$('#imm_divisa ul').stop().animate({'opacity':1},2000);
}
}


Nonostante l'uso dei commenti che dovrebbe  semplificare la comprensione del codice,  ne riassumo i punti chiave:

• Le variabili nomeImm e mode_current servono a contenere i nomi dell'immagine e della modalità attualmente in uso;
• La variabile setting contiene i parametri di tutte le modalità di divisione dell'immagine, parametri fondamentali per un' ordinata e corretta gestione dell'animazione;
• La funzione changeImage() serve a cambiare immagine e a dividerla nei blocchi presenti in base alla modalità selezionata.
• La funzione changeMode() serve appunto a cambiare la modalità di visualizzazione modificando la struttura HTML.

Fonte articolo:
ketek.altervista.org

Autore

Sono Carlo Ventrella, studente e appassionato di programmazione, particolarmente interessato allo sviluppo di applicazioni e script per il web. Linguaggi attualmente conosciuti: C,Java, Javascript, css, css3, php e html5.

Sito web dell'autore