Galleria immagini con jQuery UI Labeled Slider

Il widget slider della libreria jQuery UI, associato all'estensione LabeledSlider, permette di creare facilmente uno slider con cursore, generando in modo automatico la barra con il numero di step desiderati e permettendo numerose personalizzazioni.

In questa pillola mostreremo un'applicazione di questo widget: l'associazione dello slider con una galleria di immagini. Per la demo abbiamo scelto una sequenza di foto, scattate da Marco Bastoni, che ringraziamo.
 

DEMO

Il codice HTML si compone di poche righe: un div che contiene la prima immagine della galleria con id="switch_img",  e un div con id="slider" che ospiterà lo slider.

<div id="box_img">
  <img id="switch_img" width="400" height="225" src="img/moon-0.jpg" alt="eclisse di luna" />
</div>
<div id="slider"></div>

Il codice JavaScript contiene i parametri per la costruzione dello slider consultabili a questo link.
Slider e immagini sono collegati grazie ad un valore numerico: lo slider del nostro esempio è suddiviso in otto step, con valore 0, 1, 2... 7. Le immagini contengono, nella parte finale del nome, il numero che corrisponde al valore dello step a cui sono associate. Questo valore viene via via memorizzato nel parametro ui.value

Le etichette personalizzate dello slider sono definite in un array:

labels = ['21:35', '21:56', '22:16', '22:55', '23:25', '23:55', '00:35', '00:54'];

ed associate allo slider grazie a:

tickLabels: labels,

Questo il codice completo inserito in head:

$(function() {
  labels = ['21:35', '21:56', '22:16', '22:55', '23:25', '23:55', '00:35', '00:54'];
  $( "#slider" ).labeledslider({
    range: "min",
    min: 0,
    max: 7,
    step: 1,
    tickLabels: labels,
    slide: function( event, ui ) {
      $('#switch_img').attr('src', 'img/moon-'+ui.value+'.jpg');
    }
  });
});