jQuery: slideshow con una select box

Si può realizzare uno slideshow usando una select box (elemento select) per selezionare le slide. Si tratta di una soluzione molto usata su diversi siti. Quello che occorre fare con jQuery è semplicemente associare a ciascuna slide un ID e quindi impostare ciascun elemento option per far riferimento all'ID della slide corrispondente. Vediamo come.

Partiamo dalla seguente struttura HTML:


<div id="slides">

    <form action="#" method="get" id="slide-nav">
    
    	<select id="nav" name="nav">
    		<option>Seleziona</option>
    		<option>Slide 1</option>
    		<option>Slide 2</option>
    		<option>Slide 3</option>
    	</select>
    
    </form>
    
    <div id="slider-wrapper">
    
		<div class="slide">...</div>
		<div class="slide">...</div>
		<div class="slide">...</div>
	</div>
</div>

Inizialmente le slide saranno nascoste da questa dichiarazione CSS:


div.slide {
	display: none;
}

La prima cosa da fare con jQuery è creare un ID progressivo per ciascuna slide:


$('div.slide', '#slides').each(function(index) {
  
    var $slide = $(this);
    var idNumber = index + 1;
    
    $slide.attr('id', 'slide-' + idNumber);
  
  
  
});

Quindi impostiamo l'attributo value di ciascun elemento option sugli attributi ID appena creati:


$('div.slide', '#slides').each(function(index) {
  
    var $slide = $(this);
    var idRef = '#' + $slide.attr('id');
    $('option', '#nav').eq(index + 1).
    attr('value', idRef);
      
});

Infine, usiamo l'evento change sull'elemento select per selezionare la slide corrente e farla apparire, nascondendo al contempo tutte le altre:


$('#nav').change(function() {
  
    var index = $(this)[0].selectedIndex;
    var ref = $(this).find('option').
              eq(index).attr('value');
              
    $(ref).slideDown('slow').
    siblings().
    hide();
    
    
      
});

Potete visionare l'esempio finale in questa pagina.

Torna su