Very short snippet: slideshow in 10 righe di codice

Lasciatemi mostrare com’è possibile implementare un semplice Slideshow di immagini con pochissime righe di codice, sfruttando jQuery.
Questa tecnica può essere implementata su qualsiasi tipo di sito Web, la cosa importante è includere la libreria jQuery. Ho usato questa tecnica per un sito realizzato in WordPress, sviluppato in poche ore per un evento. A volte non è necessario includere script complessi per semplici effetti, così soluzioni come questa tornano utili anche per semplici sketch.
L’obiettivo è quello di creare una fade tra una serie di immagini, di numero teoricamente illimitato. Tuttavia, vista la semplicità del codice, nell’esempio che mostro le immagini sono tutte caricate nella pagina, quindi un numero limitato e dimensioni ridotte rendono lo script ulteriormente efficace.
Nella soluzione da me adottatta, cioè all’interno dell’ambiente WordPress, la prima cosa che ho fatto è stata quella di caricare front-end l’ultima versione di jQuery. Per fare questo ho inserito quete righe di codice all’interno del file functions.php del tema attivo; cosa che consiglio di fare – quasi – sempre:

1
2
3
4
5
if (!is_admin()) {
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
  wp_enqueue_script('jquery');
}

Fatto ciò ho inserito il codice Javascript e HTML all’interno della home, nel mio coso nel file index.php del tema. La parte HTML/CSS l’ho strutturata in questo modo:

1
2
3
4
5
6
7
8
<div class="fading">
   <img id="foto-0" src="images/foto-5.jpg" alt="Immagine" />
   <img id="foto-1" src="images/foto-1.jpg" alt="Immagine" />
   <img id="foto-2" src="images/foto-2.jpg" alt="Immagine" />
   <img id="foto-3" src="images/foto-3.jpg" alt="Immagine" />
   <img id="foto-4" src="images/foto-4.jpg" alt="Immagine" />
   <img id="foto-5" src="images/foto-5.jpg" alt="Immagine" />
</div>

Nel mio caso dovevo mostrare 5 immagini a rotazione; notate la ripetizione dell’immagine foto-5.jpg, tecnica che permette di dare un senso di continuità allo slide (never ending), come mostrato nell’immagine qui sotto:

Slideshow

In generale, dunque, l’ultima immagine nella lista va “anche” inserita per prima, qualsiasi sia il numero di immagini da “ciclare” (se l’immagini sono banalmente due, vanno inseriti 3 (tre) tag img.
Le immagini, così disposte, verrebbero mostrate una accanto all’altra (o, al limite, una sotto l’altra). Inoltre considerate che lo slideshow inizia con l’ultima immagine inserita (la 5), in ordine inverso quindi.
Applichiamo ora il CSS in modo da sovrapporre le immagini:

1
2
3
4
5
6
7
8
9
div.fading {
   /* Inserire qui l'altezza delle immagini */
   height:200px;
   overflow:hidden;
}

div.fading img {
   position:absolute;
}

Come vedete davvero semplice. Fatto questo non rimane che inserire il nostro script Javascript. Nel mio caso ho inserito il codice Javascript nel file header.php, stando attento a caricarlo solo per la home page:

1
2
3
<?php if(is_home()) : ?>
   <!-- Inserire qui il codice Javascript mostrato sotto -->
<?php endif; ?>

Il codice Javascript è il seguente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
    var images = Array('foto-0', 'foto-1', 'foto-2', 'foto-3', 'foto-4', 'foto-5');
    var sindex = images.length - 1;
    var intervalTime = 2000;
    var fadeSpeed = 2000;

    jQuery(document).ready(
        function() {
            setTimeout('fadeOutImage()', intervalTime);
        });
        function fadeOutImage() {
            jQuery('img#' + images[sindex]).fadeOut( fadeSpeed, function(){
            sindex--;
            if(sindex == 0) {
            for(var i = (images.length - 1); i > 0; i--) {
                jQuery('img#'+ images[i]).show();
            }
            sindex = images.length - 1;
         }
         setTimeout('fadeOutImage()', intervalTime);
    });
}
</script>

Il codice è davvero semplice, una vera snippet. Le prime righe impostano l’array degli ID delle immagini da visualizzare ciclicamente. Poi alcune definizioni per i tempi di attesa e l’indice dell’immagine su cui applicare l’effetto fade. La funzione fadeOutImage() è il cuore di tutto; applica l’effetto e verifica se si è arrivati alla fine. In quel caso riattiva tutte le immagini e ricomincia. Volendo lo “scriptino” può essere migliorato, applicando effetti diversi o altro. Se qualcuno ha qualche idea la posti pure senza rimorsi :)

4 commenti a: “ ”

  1. 04 giu, 2010 gius1983:

    ciao, interessante. ma sarebbe bello anche un link al sito in questione. sono io a non vederlo oppure manca?

    RispondiQuota
  2. 04 giu, 2010 Giovambattista Fazioli:

    @gius1983: veramente non volevo fare pubblicità indiretta. Ti manderò il link in privato via mail :)

    RispondiQuota
  3. 06 giu, 2010 I migliori post della settimana #69 | EmaWebDesign :: Web Programming / Web Design / SEO:

    [...] 05) Very short snippet: slideshow in 10 righe di codice [...]

  4. 22 nov, 2010 nicola:

    ciao,
    è possibile utilizzare questo tipo di slideshow in indexhibit?
    grazie e complimenti.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL