Inserire un "picture slider" in javascript in un template per il web


Useremo un script liberamente utilizzabile Nivo Slider (http://nivo.dev7studios.com/) basato su jQuery (http://jquery.com/)

cosa è jQuery :

jQuery è una libreria di funzioni (un cosiddetto software framework) per le pagine web, codificata in javascript.
Con jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l'altezza di un elemento, o farlo scomparire con effetto dissolvenza.
Anche la gestione degli eventi è completamente standardizzata e gestita automaticamente.
La libreria è compatibile con altri framework quali Prototype, MooTools, o YUI, e può essere pertanto utilizzata assieme ad esse.
Inoltre, sono disponibili moltissimi plugin, tra i quali è necessario citare quello ufficiale, jQueryUI (user interface): esso provvede a fornire una accattivante interfaccia grafica, includendo fogli di stile, finestre modali con resizing e moving, calendari e scrollbar. [via Wikipedia http://it.wikipedia.org/wiki/JQuery ]


materiale occorrente per installare Nivo Slider: dal sito scarichiamo il pacchetto compresso (da Download)
che integreremo nel nostro sito come segue: nel frattempo prepariamo qualche immagine per lo slider: nb nivo slider non supporta immagini con trasparenza, useremo normali jpg tutte delle stesse dimensioni (nel mio caso 700px x 300px) per questa demo ho usato l'efficace lorempixum per ottenere le immagin già dimensionate provate! : questo link chiama una foto 700x300 B/N http://lorempixum.com/g/700/300/city/

andiamo a ripartire le risorse nelle cartelle del nostro sito web: in particolare copiamo il file
jquery.nivo.slider.js
nella cartella js (oppure mettiamo la versione pack, compressa)

i files css
nivo-slider.css
style.css
nella cartella css: il file dell'esempio style.css comprende un reset di massima e le chiamate ad alcune immagini di servizio (una gif animata che viene visualizzata nell'attesa del caricamento delle immagini, uno sprite con bottoncini e due frecce)
queste immagini le spostiamo nella cartella img del nostro sito insieme alle foto dello slider e modifichiamo le chiamate dal css

ricordo che la scrittura
background:url(../img/loading.gif)
utilizza la notazione dei percorsi relativi dei files. Partendo da dove è salvato il file CSS si sale alla directory superiore (la scrittura .. ) e si scende nella cartella img. In attesa di ritornarci a lezione invito a leggere questo bell'articolo su HTML.it

in alternativa copiamo la porzione del codice che ci interessa nel nostro foglio di stile: ricordiamo di imporre altezza e larghezza dello slider uguale a quello delle immagini

esempio delle linee css modificate
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
 
#slider {
    position:relative;
    width:700px;
    height:300px;
    margin-left:10px;
 
    background:url(../img/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}
 
.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../img/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}
 
.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(../arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}
 
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}
 
 

per integrare lo slider nel nostro sito dobbiamo mettere nel codice le seguenti linee
<!-- in genere nella head ma qualcuno preferisce mettere le chiamate al js a fine pagina
in questo esempio si chiede il jQuery al server GoogleApi -->
 
<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>
e poi creare la struttura dello slider inserendo un div con id="slider" che conterrà le nostre immagini

<div id="slider" class="nivoSlider"> <!-- questo è lo slider -->
<img src="img/slide-01.jpg"  alt="" />
<img src="img/slide-02.jpg" alt="" />
<img src="img/slide-03.jpg" alt="" />
<img src="img/slide-04.jpg" alt="" />
</div>
infine bisogna mettere nella pagina la chiamata allo script

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>





ecco l'html di massima

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
 
<head>
    <title>Esempio di Nivo Slider</title>
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
 
<body>
<div id="slider" class="nivoSlider"> <!-- questo è lo slider -->
<img src="img/slide-01.jpg"  />
<img src="img/slide-02.jpg" alt="" />
<img src="img/slide-03.jpg" alt="" />
<img src="img/slide-04.jpg" alt="" />
</div>
 
<!-- quando chiamare il jQuery e javascript? una scuola di pensiero preferisce la chiamata a termine pagina per velocizzare il caricamento della pagina -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
  $('#slider').nivoSlider();
});
</script>
</body>
</html>

personalizzazioni:

didascalie di testo semplice :inserire il campo title nell'immagine
<img src="img./slide-01.jpg" title= "Questa è una semplice didascalia">

didascalie con html

1) inserire l'attributo title="#didascalia-1" nell'immagine specificando un id
2) aggiungere subito dopo il div slider il div con il contenuto HTML

<div id="didascalia-1" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>


variazione degli effetti: nella chiamata allo script inserire i parametri voluti: in questo esempio sono stati levati i controlli di navigazione e viene usata solo la dissolvenza come effetto

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
 
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:false, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:false, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
 
    });
});
</script>
 

Ed ecco il demo : in questo caso il codice è stato modificato per chiamare i css e i javascript direttamente dalla mia dropbox !





foto courtesy http://lorempixum.com/