Galleria in jQuery e jQuery UI Slider

Sono sincero: amo jQuery!!

Ha tantissime cose utili, è facile da apprendere con la sua sintassi chiara e pulita ed è molto supportato.

Oggi vi spiego come creare una galleria di immagini usando jQuery, jQuery UI e la sua funzione slider.

jQuery UI è un'estensione di jQuery specifico per la costruzione delle User Interface.

Potete scarocare il pacchetto anche dei temi già fatti (in quel caso dovrete caricare sul sito anche il relativo css).

Qui trovate varie demo; a noi interessa slider.

Per prima cosa dovete scaricare sia jquery.js che jquery ui.js.

Per quest'ultimo potete scegliere i componenti che volete e un tema.

Io vi consiglio di integrare tutti i componenti; per il tema fate vobis, io ho scelto UI darkness.

Una volta scaricati i due file js dovete integrarli nell'head della pagina:

<script src="../js/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

Io ho una versione un pò "vecchia" di jQuery.

Fatto ciò iniziamo a vedere lo slider.

Per creare un slider base dovete fare solo questo:

<script>

$(function() {

  $( "#slider" ).slider();

});

</script>

<div id="slider"></div>

Questo permette di creare un slider fine a stesso, nel senso che potete muovere il cursore ma dovete agganciarlo a qualcosa per renderlo operativo.