JavaScript  »  Articoli  »  JQuery 

Gli usi possibili di uno slider nel contesto di un'interfaccia web sono i più svariati. In generale, questo tipo di componente si dimostra efficace e adatto tutte le volte che sia necessario presentare all'utente una sequenza di immagini, magari accompagnate da una didascalia. Si pensi, dunque, alla presentazione di foto personali, di illustrazioni di prodotti oppure, come accade sulla home page del nostro Webnews, a un box dinamico per la presentazione delle news in evidenza.

Tra le tante soluzioni disponibili per il framework jQuery, Nivo Slider è tra le più apprezzate. Questo plugin, infatti, coniuga mirabilmente semplicità d'uso e ampiezza delle opzioni di personalizzazione.

Come funziona

Per preparare il nostro primo semplice esempio, abbiamo innanzitutto scaricato lo script. Trovate il plugin nella versione normale e in quella compressa all'interno del pacchetto zip allegato a questo articolo, quello che contiene tutti gli esempi che andremo a realizzare nel corso dell'articolo.

Nel primo esempio siamo partiti da questa struttura HTML:

<div id="slider" class="nivoSlider">
<img src="images/slider-1.jpg" alt="" />
<img src="images/slider-2.jpg" alt="" />
<img src="images/slider-3.jpg" alt="" />
<img src="images/slider-4.jpg" alt="" />
</div>

Nulla di più chiaro: un div con id slider e classe nivoSlider fa da contenitore ad una sequenza di quattro immagini.

Nella sezione head abbiamo collegato al documento due fogli di stile:

<link rel="stylesheet" href="stili/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stili/style.css" type="text/css" media="screen" />

Il foglio nivo-slider.css contiene le regole per la gestione visuale generale dello slider: posizionamento delle immagini e delle didascalie, stili per i pulsanti di navigazione, gestione di eventuali link, etc. Se non si desidera modificare pesantemente l'aspetto di Nivo Slider, può essere lasciato intatto.

All'interno del foglio di stile style.css, poi, c'è una sezione con delle regole anch'esse destinate a impostare l'aspetto dello slider per adattarlo alla nostra pagina. Lasciamo a voi lo studio approfondito del CSS, non prima di aver evidenziato una regola fondamentale:

#slider {
	border: 2px solid #333;
	width:640px;
 height:427px;
 margin:40px auto;
	background:url(../images/loading.gif) no-repeat 50% 50%;
}

Al div con id #slider, oltre ad un bordo spesso 2px e un'impostazione per i margini, abbiamo assegnato una larghezza di 640px e un'altezza di 427px. Le due dimensioni corrispondono a quelle delle immagini che abbiamo usato, tutte e quattro di 640x427px. Lo sfondo assegnato al div è dato dalla classica rotellina per il preload che compare mentre un'immagine viene caricata.

E il Javascript? Ci siamo. In fondo alla pagina, prima del tag di chiusura </body>, inseriamo il riferimento a jQuery, al plugin e la semplice istruzione di inizializzazione dello script:

<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
  $('#slider').nivoSlider();
});
</script>

Il risultato è questo.

Altri articoli

Altre guide

Altre newsletter