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

CONDIVIDI
ARTICOLI CORRELATI
4 commenti a “Transizioni di immagini in jQuery con Nivo Slider”

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.

Inviato da Tremisfero il 26 marzo 2010 alle 13:23

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

Inviato da MAMBRO il 26 marzo 2010 alle 13:50

morto?
ah ah ah.

guarda qui:
http://www.biello.it/ie6-non-e-morto.jpg

altro che morto quasi il 20% delle visite.
Purtroppo.

Inviato da Andrea il 26 marzo 2010 alle 15:52

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();

Inviato da Giorgia il 17 febbraio 2011 alle 19:34
Lascia un commento

Captcha - risolvi l\'operazione per inviare il commento * Time limit is exhausted. Please reload CAPTCHA.