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

4 Commenti

  1. Ciao, ho provato ad inserire Nivo Slider, nel mio Blog di Blogger, ma non riesco a visualizzarlo! Usando il debugger di Firebug, questo è l’errore che mi dà:

    $(“#slider”).nivoSlider is not a function
    [Interrompi per questo errore] $(‘#slider’).nivoSlider();

  2. IE6 è morto (per fortuna) e sarebbe ora di smetterla di fare attenzione alla compatibilità verso questo schifo di browser.
    Per il resto posso essere d’accordo con te

  3. Attenzione: il funzionamento del plugin è garantito solo per IE7+. Considerndo l’enorme diffusione di IE6, non è consigliabile l’utilizzo. I bug sul 6 sono evidenti.
    Anche il requisisto FF3+ non è il massimo.

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.