26 aprile 2014

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 jquery ui labeled slider
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');
    }
  });
});


2 commenti:

  1. non lo ha commentato nessuno...dopo due anni l'ho provato integrandolo in ws...OK... naturalmente anche con modifica semplice...
    http://www.skeggia12.it/test/cocuzzolo/pagina-1.html
    e
    http://www.skeggia12.it/test/cocuzzolo/pagina-2.html...

    RispondiElimina
    Risposte
    1. Grazie Antonio per il commento.
      Sì, può essere utile anche per passioni calcistiche :)
      Hai chiuso il cerchio: l'idea di scrivere questo articolo è nata da QUI :) :)

      Elimina