Il nuovo banner di ubuntu-it con JQuery

Da pochi giorni abbiamo un nuovo banner nella homepage del sito web di ubuntu-it.
Il suo compito è quello di evidenziare i contenuti del sito più importanti, dato che il menù, essendo un sito che contiene molti contenuti, è piuttosto corposo.
Il nuovo banner utilizza un mix di HTML, CSS e javascript con la libreria JQuery.




Innanzitutto nella pagina in cui verrà incluso il banner dobbiamo includere il file javascript per jquery e quello del banner, oltre ai file CSS: a questo proposito, dobbiamo includere con degli IF condizionali dei CSS speciali per Internet Explorer 7 e Internet Explorer 6, se sono i browser utilizzati dall'utente.

  
   <link rel="stylesheet" href="banner.css">
   <!--[if IE 7]><br />      <link rel="stylesheet" href="ie7tricks.css"><br />    <![endif]-->

   <!--[if IE 6]><br />      <link rel="stylesheet" href="ie6tricks.css"><br />    <![endif]-->

Per quanto riguarda l'HTML, potete trovarlo qui.

Il file javascript che gestisce il banner (che contiene degli accorgimenti specifici per Internet Explorer 6, che come al solito è categoria a parte), è il seguente:

/* Licenza tagliata per limiti di spazio, si veda il file originale indicato giù per la licenza */


/* The currently selected category */
curCategory = "";
/* The URL realated to the current category */
url = "http://www.ubuntu-it.org/Ottenere_Ubuntu.shtml";
/* category -> url map */
urlsMap = {
  "support": "http://www.ubuntu-it.org/Supporto.shtml",
  "contribuire": "http://www.ubuntu-it.org/contribuire.shtml",
  "newsletter": "http://www.ubuntu-it.org/contenuti/newsletter-italiana.shtml",
  "fcm": "http://www.ubuntu-it.org/contenuti/fcm.shtml",
  "media": "http://www.ubuntu-it.org/contenuti/media.shtml",
  "contatti": "http://www.ubuntu-it.org/contatti.shtml"
}
/* Tracking activated items, if the user highlights more than 1 menu item
 * too fast. */
activatedItems = Array();

function changeActiveCategory(liId) {
  /* Change the active category in the banner.

  @param liId the ID of the selected 'li' element
  */
  /* Change 'li' classes for the old selected category and the new one */
  newCategory = liId.substring(2);
  if (curCategory != "") {
    $("#li" + curCategory).removeClass("lihover");
    $("#li" + curCategory).addClass("linormal");
  }
  $("#" + liId).removeClass("linormal");
  $("#" + liId).addClass("lihover");
  /* Change the main image for the new category*/
  $("#bannermainbg").fadeOut("slow", function(data) {
    if (curCategory != "") {
      $("#bannermainbg").removeClass(curCategory + "main");
    }
    /* Update info about the new category */
    curCategory = newCategory;
    url = urlsMap[curCategory];
    $("#bannermainbg").addClass(curCategory + "main");
    /* Workaround for IE6: CSS class doesn't work properly, so we set
     * the background manually. */
    if ($.browser.msie) {
      /* Check that is IE with version < 7 */
      if ($.browser.version < 7.0) {
        path = "url(/uploads/file/banner2009/images/" + curCategory + ".png)";
        $("#bannermainbg").css("background-image", path);
      }
    }
    $("#bannermainbg").fadeIn("slow");
  });

}


$(document).ready(function() {
  /* Change the link href, because the user has JS enabled */
  $("#bannerlinkslist li a").attr("href", "#");
  $("#bannerlinkslist li").hover(function() {
    /* Give info about the current 'li' id to the function */
    activatedItems.push($(this).attr("id"));
    changeActiveCategory($(this).attr("id"));
  },
  function() {
    /* If it's not the currently selected item, 
     * remove the correspective class */
    for (iter = 0; iter < activatedItems.length; iter += 1) { 
      if (activatedItems[iter] != ("li" + curCategory)) {  
        $("#" + activatedItems[iter]).removeClass("lihover");
        $("#" + activatedItems[iter]).addClass("linormal");
        activatedItems.splice(iter);
      }
    }
  });
  /* Manage the onclick event on the main banner content */
  $("#bannermain").click(function() {
    window.location = url;
  });
});

//vim: ai ts=2 sw=2 et sts=2

Il codice completo è a questo indirizzo.

La funzione changeActiveCategory() si occupa di:
1) evidenziare la voce correntemente selezionata nella lista della parte destra del banner;
2) riportare nello stato di elemento non selezionato la voce precedentemente selezionata;
3) assicurarsi che soltanto 1 sola voce sia selezionata (il problema si pone se l'utente passa velocemente su più di un elemento, più velocemente dell'effetto, che poteva portare a più voci selezionate nello stesso tempo);
4) cambiare l'immagine principale del banner nella parte sinistra: il tutto è gestito da classi CSS, tranne per IE6 per il quale aggiungiamo un controllo e cambiamo "manualmente" l'immagine;
5) cambiare l'indirizzo a cui si arriva cliccando sul banner.

Il CSS principale è invece consultabile qui.

Il demo, oltre ovviamente al sito di ubuntu-it, è qui.