Transizioni di immagini in jQuery con Nivo Slider

Ecco un ottimo plugin in jQuery leggerissimo ma con effetti davvero notevoli.

Nivo Slider è uno slider di immagini che sfrutta la potenza e la versatilità di jQuery in modo ottimale: pesa solo 5kb (compresso).

E’ possibile scegliere tra 9 effetti di transizione
Il codice è semplice e pulito
Possibilità di navigazione tra le immagini
Possibilità di linkare le singole immagini
Utilizzo libero con licenza GPL

Testato e funzionante su:

Internet Explorer v7+
Firefox v3+
Google Chrome v4
Safari v4
Opera v10.5

L’utilizzo è abbastanza semplice

Scaricate lo zip dal sito dell’autore .

Create una pagina index e inseritela nella cartella creata dopo aver unzippato i files

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Passiamo ora a inserire le nostre immagini un div

<div id="slider">
<img src="immagine01.jpg" alt="" />
<a href="http://link_che_vuoi_tu"><img src="immagine02.jpg" alt="" /></a>
<img src="immagine03.jpg" alt="" title="Esempio di didascalia" />
<img src="immagine04.jpg" alt="" />
</div>

Ora dobbiamo far partire il tutto con queste righe da inserire sempre prima di </head>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Non ci resta altro ora che personalizzare il tutto con il css, inserire delle freccie ben fatte o quello che preferite.

Lo script e tutte le informazioni del caso le trovate sul sito dell’autore qui