Galleria in jQuery e jQuery UI Slider

Mattepuffo's logo
Galleria in jQuery e jQuery UI Slider

Galleria in jQuery e jQuery UI Slider

Programmazione, Javascript - AJAX

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.

Prima di tutto dobbiamo creare alcuni div con le immagini dentro al body:

<body>
<div class="sliderGallery">
<ul>
<li><img src="immagini/foto1.jpg" alt="" /></li>
<li><img src="immagini/foto2.jpg" alt="" /></li>
<li><img src="immagini/foto3.jpg" alt="" /></li>
<li><img src="immagini/foto4.jpg" alt="" /></li>
<li><img src="immagini/foto5.jpg" alt="" /></li>
</ul>
<div class="slider">
<div class="handle"></div>
</div>
</div>
</body>

Abbiamo sliderGallery che contiene le immagini.

Il div slider che fungerà da slider e che contiene handle che servirà proprio per agganciare lo slider alla galleria.

A questo punto creaiamo un file style.css per impostare i div nella pagina:

/* slider specific CSS */
.sliderGallery {
overflow: hidden;
position: relative;
padding: 10px;
height: 530px;
width: 100%;
}

.sliderGallery ul {
position: absolute;
list-style: none;
overflow: hidden;
white-space: nowrap;
padding: 0;
margin: 0;
}

.sliderGallery ul li {
display: inline;
}

.slider {
width: 542px;
height: 17px;
margin-top: 520px;
margin-left: 5px;
padding: 1px;
position: relative;
}

.handle {
position: absolute;
cursor: move;
height: 17px;
width: 181px;
top: 0;
z-index: 100;
}

Non sto a spiegarvi il css.

Passiamo invece al codice jQuery da richiamare nella pagina:

<script type="text/javascript">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
$('.slider', container).slider({
max: itemsWidth,
handle: '.handle',
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>

Il codice imposta sliderGallery come container per gli altri div.

Fa un calcolo della larghezza di spostastamento dello slider.

Imposta lo slider sul div slider richiamanso alcune opzioni/metodi/eventi:

  • l'opzione max corrisponde al valore di spostamento dello slider (il valore predefinito è 100)
  • handle serve per impostare il focus su un determinato div
  • l'evento slide serve per impostare cosa deve essere slidato; ui.value serve per impostare il valore dello slider (nel caso di un singolo handle)

E' in questi ultimi due punti che avviene la "magia".

In pratica spostando il cursore sullo slider verrano fatte scorrere le immagini.

Vi posto il codice di una pagina di esempio:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slider</title>
<link rel="stylesheet" type="text/css" href="css/style.css"  />
<script src="js/ddlevelsmenu.js" type="text/javascript"></script>
<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>
<script type="text/javascript">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
$('.slider', container).slider({
max: itemsWidth,
handle: '.handle',
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
</head>
<body>
<div id="container">
<div class="sliderGallery">
<ul>
<li><img src="immagini/foto1.jpg" alt="" /></li>
<li><img src="immagini/foto2.jpg" alt="" /></li>
<li><img src="immagini/foto3.jpg" alt="" /></li>
<li><img src="immagini/foto4.jpg" alt="" /></li>
<li><img src="immagini/foto5.jpg" alt="" /></li>
</ul>
<div class="slider">
<div class="handle"></div>
</div>
</div>
</div>
</body>
</html>

L'unica pecca è che nn funziona con gli schermi touch.

Ho provato su iPad e iPhone: per far funzionare la galleria dovete toccare la barra che funzionerà come clic.

Spero di risolvere con jQuery Mobile.

Spero vi sia utile!

    Condividi

    Commentami!