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.
Come si può notare, le quattro immagini scorrono in sequenza dalla prima all'ultima, con un ciclo continuo, una pausa di 3 secondi, una transizione casuale tra l'una e l'altra. Questo comportamento è dato dalle impostazioni di default definite nella parte finale dello script, ovvero nel file jquery.nivo.slider.js. Eccole:
//Default settings
$.fn.nivoSlider.defaults = {
effect: 'random',
slices: 15,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
directionNavHide: true,
controlNav: true,
controlNavThumbs: false,
controlNavThumbsFromRel: false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav: true,
pauseOnHover: true,
manualAdvance: false,
captionOpacity: 0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};Se desiderate modificare il comportamento di default dello slider, basterà agire su questi parametri, direttamente nello script principale o, meglio ancora, nella parte di inizializzazione.
Prendiamo per esempio il parametro effect: serve a definire il tipo di transizione. Il valore di default è random, ovvero una transizione casuale. I valori possibili sono i seguenti: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft.
Modifichiamo allora l'esempio di partenza impostando come effetto di transizione la dissolvenza e prolungando il tempo di visualizzazione delle singole immagini a 5 secondi. Useremo il valore 'fade'. Ecco come si presenta nel secondo esempio l'inizializzazione dello script:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade',
pauseTime: 5000
});
});
</script>Ecco la demo aggiornata.
Per quanto riguarda le funzioni delle altre opzioni, esse sono state evidenziate sotto forma di commenti nel codice dello script che trovate nel download:
$.fn.nivoSlider.defaults = {
effect: 'random', //Imposta l'effetto di transizione
slices: 15, //Imposta le caratteristiche visive di alcune transizioni
animSpeed: 500, //Velocità della transizione in millisecondi, 500 = mezzo secondo
pauseTime: 3000, //Durata della visualizzazione dell'immagine in millisecondi, 3000 = 3 secondi
startSlide: 0, //Imposta l'immagine che viene visualizzata per prima, 0 = la prima impostata nel codice
directionNav: true, //Imposta la presenza (true) o l'assenza (false) delle frecce di navigazione
directionNavHide: true, //Impostato a true nasconde le frecce di visualizzazione che saranno visibili solo al passaggio del mouse sull'immagine
controlNav: true, //Visualizza (true) o nasconde (false) i pulsanti di navigazione sotto lo slider
controlNavThumbs: false, // Imposta la navigazione attraverso miniature delle immagini
controlNavThumbsFromRel: false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav: true, //Navigazione da tastiera
pauseOnHover: true, //Impostato su true fa sì che l'immagine si fermi se il cursore del mouse è su di essa
manualAdvance: false,
captionOpacity: 0.8, //Opacità della didascalia
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};Aggiungere didascalie
Una funzionalità interessante di Nivo Slider è quella che prevede la possibilità di inserire delle didascalie trasparenti come commento alle immagini. Abbiamo implementato tale funzionalità nel terzo esempio.
Per inserire una didascalia si possono seguire due strade.
Se la didascalia è semplice, ovvero se non deve avere particolari formattazioni del testo o presentare dei link al suo interno, è sufficiente inserirla come valore dell'attributo title per l'immagine che ci interessa. Nell'esempio lo abbiamo fatto sulla seconda immagine della sequenza, che, inoltre, è stata impostata come link:
<div id="slider" class="nivoSlider">
<img src="images/slider-1.jpg" alt="" />
<a href="http://www.html.it"><img src="images/slider-2.jpg" alt="" title="Possiamo inserire una didascalia nel title" /></a>Se invece la didascalia deve essere più 'complessa' e ricca, possiamo crearla come un frammento di codice HTML. Nell'esempio abbiamo applicato la tecnica alla quarta immagine:
<img src="images/slider-3.jpg" alt="" />
<img src="images/slider-4.jpg" alt="" title="#htmlcaption" />
</div>Come si vede, l'immagine presenta nell'attributo title il valore #htmlcaption. Secondo le regole sintattiche sintattiche dei CSS, è il riferimento ad un elemento con id htmlcaption. Ma di cosa si tratta? E dov'è?
Si tratta di un elemento HTML (un div per esempio) che contiene il testo della didascalia e che va collocato fuori dallo slider, assegnandogli la classe nivo-html-caption (l'id può essere qualunque, basta che corrisponda poi a quello impostato sull'immagine). La classe è necessaria perché nel CSS presenta un display:none che nasconde l'elemento:
<div id="htmlcaption" class="nivo-html-caption">
<strong>Questa</strong> è una didascalia in HTML con un <a href="http://www.html.it">link</a>.
</div>Abbinamento a sistemi di CMS
Per concludere segnaliamo la disponibilità di Nivo Slider anche come modulo per popolari sistemi di CMS come Drupal, Joomla e WordPress. Il download può essere effettuato dalla pagina principale del progetto. Per la configurazione su WordPress è possibile fare riferimento a questo tutorial.
