Creare uno slideshow di immagini d'impatto con jQuery e Nivo Slider!

Giovanni Canella

08/11/2013

5192

In un sito che deve commercializzare un suo prodotto, o mostrare le caratteristiche di un programma, non c'è rappresentazione migliore che uno slideshow di immagini al centro dello schermo. Ci sono varie strade per realizzare tutto ciò, in questo articolo utilizzeremo Nivo, un plugin per jQuery

Infatti se si è in grado di far colpo sull'utente attraverso una grafica accattivante si è già a metà dell'opera, in quanto è sinonimo di professionalità e competenza della ditta/azienda.

DEMO

Download e integrazione

Detto ciò rechiamoci sul sito ufficiale, e scarichiamo il plugin cliccando su download, selezionando la versione attuale. Attualmente si è giunti alla 3.2. E' molto leggero (pesa soli 28.9kB), che non incidono in modo significativo sul caricamento della pagina stessa. Inoltre dato che si basa su jQuery, dobbiamo includere anche quest'ultima libreria.

Un vantaggio da non trascurare di questo slider è il fatto che sia responsive! Così potrà essere tranquillamente utilizzato dopo aver creato il nostro layout fluido.

Ad ogni modo una volta estratto il pacchetto .zip, i file che ci interessano sono i seguenti:

  • jquery.nivo.slider.js,
  • nivo-slider.css,
  • e un tema che più preferiamo, all'interno della cartella theme/. (nel mio caso ho optato per light).

File da prendere dal pacchetto Nivo Slider

Creiamo quindi una nuova pagina .html, dove oltre la solita struttura, includiamo lo script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Nivo slider demo [Ginho.it]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <link rel="stylesheet" href="light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
</head>
<body>
 
</body>
</html>

Successivamente all'interno del body creiamo un contenitore al cui interno verranno inserite le imamgini da essere mostrate. Da notare la proprietà title, che verrà mostrata nella relativa slide, per indicare cosa rappresenta, o per aggiungere una descrizione supplementare.

<div class="slider-wrapper theme-default">
	<div id="slider" class="nivoSlider">
       	<img src="immagini/1.png" alt="Guida ai filtri CSS3!" title="Guida ai filtri CSS3!" /></a>
        <img src="immagini/2.png" alt="Sistema di autenticazione con PHP E HTTP!" title="Sistema di autenticazione con PHP E HTTP!" />
        <img src="immagini/3.png" alt="Inviare mail in modo sicuro con PHP!" title="Inviare mail in modo sicuro con PHP!" />
    </div>
</div>
 

Aggiungiamo giusto un po' di stile alla pagina

* {
	font-family: Arial, Helvetica, sans-serif;
}

#slider {
	box-shadow: 0px 1px 10px 2px #CCC;
}
	
.nivo-prevNav {
	padding: 5px;
	background-color: #FFF;
}

.nivo-nextNav {
	padding: 5px;
	background-color: #FFF;
}
	
#slider {
	width: 700px;
	margin: 0 auto;
}

Infine possiamo attivare il plugin, dopo esserci accertati che il DOM sia caricato completamente per evitare eventuali problemi, inserendo questo codice nell'head della pagina:

$(window).load(function() {
	$('#slider').nivoSlider();
});

Questa è l'inizializzazione base. Se volessimo personalizzare il plugin ecco un elenco principale dei parametri disponibili:

  • effects: L'effetto da applicare allo slider,
  • animSpeed: La velocità di animazione,
  • pauseTime: Per quanto tempo verrano mostrate le slide.
  • startSlide: La slide da cui si parte,
  • directionNav: Indica se mostrare i pulsanti di navigazione laterali (Prev, Next per intenderci),
  • controlNav: Indica se mostrare l'"indice" delle slide in fondo,
  • pauseOnHover: Indica se mettere in pausa le slide al passaggio del mouse.
  • prevText: Specifica il testo del pulsante "Precedente" se attivato controlNav.
  • nextText: Specifica il testo del pulsante "Successivo" se attivato controlNav.
  • manualAdvance: Specifica se le slide vengono mostrate autonomamente, o se serve l'input dell'utente.
$(window).load(function() {
    $("#slider").nivoSlider({
		effect: "fold",           
		animSpeed: 500,          
		pauseTime: 3000,               
		startSlide: 0,               
		directionNav: true,          
		controlNav: false,              
		controlNavThumbs: false,        
		pauseOnHover: true,           
		manualAdvance: false,          
		prevText: "<<",              
		nextText: ">>"
	});
});

Ecco il risultato finale:

Esempio slider Nivo

Inoltre se l'effetto mostrato ci ha stancato, o vogliamo provare qualcosa di nuovo, possiamo sceglierne tra questa lista:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Per poi applicarlo:

$("#slider").nivoSlider({
	......
	effect: "boxRain",           
	......
});

Codice finale

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Nivo slider demo [Ginho.it]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <link rel="stylesheet" href="light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    
<style type="text/css">
​    
        * {
	        font-family: Arial, Helvetica, sans-serif;
        }

        #slider {
	        box-shadow: 0px 1px 10px 2px #CCC;
        }
	
        .nivo-prevNav {
	        padding: 5px;
	        background-color: #FFF;
        }

        .nivo-nextNav {
	        padding: 5px;
	        background-color: #FFF;
        }
	
        #slider {
	        width: 700px;
	        margin: 0 auto;
        }
    </style>

    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
	        $('#slider').nivoSlider();
        });
    </script>
</head>
<body>
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="immagini/1.png" alt="Guida ai filtri CSS3!" title="Guida ai filtri CSS3!" /></a>
            <img src="immagini/2.png" alt="Sistema di autenticazione con PHP E HTTP!" title="Sistema di autenticazione con PHP E HTTP!" />
            <img src="immagini/3.png" alt="Inviare mail in modo sicuro con PHP!" title="Inviare mail in modo sicuro con PHP!" />
        </div>
    </div>
</body>
</html>

 

DEMO

I più letti

Ti potrebbero interessare