Volando come un Rasteriz

JavaScript ha cambiato il mondo, lo sappiamo tutti noi: jQuery (ma anche le altre librerie, come mootools) l’ha perfezionato.

Per chi non lo conoscesse, jQuery è progetto ambizioso e diffuso che mira a mantenere viva una libreria (per l’appunto jQuery) snella e veloce capace di semplificare i metodi classici di interfacciamento con gli elementi HTML, la gestione degli eventi, le animazioni e le interrogazioni Ajax: tutto con la certezza del cross-browser, ossia la compatibilità con tutti i browser (o comunque con quelli più diffusi).

Ho utilizzato per lungo tempo Mootools ma, visto che le dimensioni contano (in bytes, cosa pensavate? maniaci! ahahah), ultimamente mi sono spostato verso questo progetto: anche perché ha un’interessante libreria di affiancamento definita jQuery-ui che gestisce alcuni aspetti delle interfacce grafiche (come menù accordion, tab, dialog, ecc).

Dopo questa breve (uaaa) premessa, veniamo però al dunque, ossia scorrere delle immagini con un’effetto a scomparsa. Si tratta di un sistema testato che attualmente ho utilizzato per l’homepage della mia azienda (Gruppo Ambita) per poter scorrere in home la presentazione (nel bannerone in alto) dei prodotti che abbiamo sviluppato.

Dal punto di vista grafico, la realizzazione non è difficilissima, e si compone di poche righe per quanto riguarda il css:

#fx_img {
	position: relative;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#fx_img li {
	position: absolute;
	top: 0px;
	left; 0px;
}

Mentre, per l’html:

<ul id="fx_img">
 <li><img src="img/1.jpg" border="0" alt="La prima foto" title="La prima foto" /></li>
 <li><img src="img/2.jpg" border="0" alt="La seconda foto" title="La seconda foto" /></li>
 <li><img src="img/3.jpg" border="0" alt="La terza foto" title="La terza foto" /></li>
 <li><img src="img/4.jpg" border="0" alt="La quarta foto" title="La quarta foto" /></li>
</ul>

Come noterete, si tratta veramente di poche righe per la parte “HTML” e “CSS”. Il discorso varia per la parte relativa al Javascript, ma comunque non si tratta di mille pagine.

var bannerSlider = {};
bannerSlider.ul = null;
bannerSlider.index = -1;
bannerSlider.length = -1;
bannerSlider.timeOut = 10; // in secondi
bannerSlider.started = false;  

bannerSlider.init = function(ulist)
{
 bannerSlider.ul = ulist;
 var els = $(bannerSlider.ul).find('li');
 bannerSlider.length = els.length;
 bannerSlider.hiddenAll(els);
 bannerSlider.viewNext();
}; 

bannerSlider.hiddenAll = function(els)
{
 for (var i=0; i<els.length; i++)
 {
 var el = els.eq(i);
 el.fadeOut(1);
 }
};

bannerSlider.viewNext = function()
{
 if (bannerSlider.length < 1)
 return;

 var els = $(bannerSlider.ul).find('li');

 if (bannerSlider.index == -1)
 {
 els.eq(0).fadeIn((bannerSlider.started) ? 1000 : 5);
 bannerSlider.index = 0;
 setTimeout("bannerSlider.viewNext()", bannerSlider.timeOut*1000);
 bannerSlider.started = true;
 return;
 }

 els.eq(bannerSlider.index).fadeOut(900);

 var next = bannerSlider.index+1;
 if (next > (els.length-1))
 next = 0;

 els.eq(next).fadeIn(1000);
 bannerSlider.index = next;
 setTimeout("bannerSlider.viewNext()", bannerSlider.timeOut*1000);
};

Infine, non ci resta che aggiungere al codice sopra, quello che segue:

$(document).ready(function() {
    bannerSlider.init("#fx_img");
});

In pochissime righe, abbiamo creato l’effetto richiesto. Per chiarimenti o dubbi sul codice, non esitate a commentare.

Hai trovato interessante questo articolo?

Condividi questo testo