Selezionare un numero fisso di elementi di una collezione

Supponiamo di avere un insieme di miniature di immagini caricate dinamicamente, per cui non possiamo stabilire né il numero totale né le dimensioni di ogni singola miniatura, ma di voler fare in modo che venga visualizzato sempre un numero fisso di miniature alla volta.

DEMO

Le immagini sono inserite negli elementi <li> di un elenco puntato:

<ul id="thumbs">
  <li><img src="img/a1.jpg" alt="" /></li>
  <li><img src="img/a2.jpg" alt="" /></li>
  <li><img src="img/a3.jpg" alt="" /></li>
  <!-- immagini successive -->
</ul>

Il codice CSS si occupa di assegnare display:inline agli elementi della lista, eliminare i punti elenco, dare un'altezza alla lista e formattare con bordo e padding le immagini.

Occupiamoci ora del codice JavaScript, che fa uso della libreria jQuery, da includere in head.
Iniziamo con il memorizzare in una variabile il numero delle miniature che devono essere sempre visibili:

var numberThumbs = 5;

Nascondiamo tutte le miniature successive con il metodo hide() di jQuery. Non conoscendo il numero totale delle immagini, utilizziamo il selettore :gt(n) che seleziona tutti gli elementi della collezione con indice maggiore di n (il primo elemento ha indice 0). Nel nostro caso la collezione è formata da tutti i <li> della lista e dobbiamo nascondere tutti quelli successivi al quinto, che ha indice 4.

$('ul#thumbs li:gt('+(numberThumbs-1)+')').hide();

Al click sulle frecce cambiano le immagini visualizzate. Più precisamente, la freccia di destra scorre tutte le immagini, sempre n alla volta; terminato l'insieme delle immagini si ritorna a visualizzare le prime:

$('.arrow_dx').click(function(){
  var $nextThumbs = $('ul#thumbs li:visible').eq(numberThumbs-1).nextAll('li');
  $('.arrow_sx').css('visibility', 'visible');
  if($nextThumbs.length != 0){
    $nextThumbs.slice(0,numberThumbs).show();
    $('ul#thumbs li:visible:lt('+numberThumbs+')').hide();
  }
  else{
    $('ul#thumbs li:lt('+numberThumbs+')').show();
    $('ul#thumbs li:gt('+(numberThumbs-1)+')').hide();
  }
});

La collezione di elementi su cui si opera è ora costituita da tutti i <li> successivi all'ultima immagine visibile. Il metodo eq(n) di jQuery permette di selezionare l'ennesimo elemento della collezione; il metodo nextAll('elemento') seleziona tutti gli elementi fratelli dell'elemento dato:

var $nextThumbs = $('ul#thumbs li:visible').eq(numberThumbs-1).nextAll('li');

L'istruzione condizionale if verifica se esistono ancora elementi fratelli successivi:

if($nextThumbs.length != 0)

Se sono presenti, visualizza con il metodo show() un numero di immagini pari a quello impostato, estraendole da tutte le immagini presenti con il metodo slice(start,end), dove start è l'indice del primo elemento da estrarre e end è l'indice dell'ultimo elemento da estrarre:

$nextThumbs.slice(0,numberThumbs).show();

Contemporaneamente vengono nascoste le immagini visualizzate prima.
Il selettore :lt(n) permette di selezionare gli elementi con indice minore di n:

$('ul#thumbs li:visible:lt('+numberThumbs+')').hide();

Se invece non ci sono altri elementi da mostrare, quindi se si è giunti alla fine della collezione di miniature, viene ripristinata la situazione iniziale, visualizzando le prime immagini dell'insieme:

else{
    $('ul#thumbs li:lt('+numberThumbs+')').show();
    $('ul#thumbs li:gt('+(numberThumbs-1)+')').hide();
  }

La freccia di sinistra permette di ritornare a visualizzare le immagini precedenti ma, giunta al primo gruppo di immagini, scompare:

$('.arrow_sx').click(function(){
  var $prevThumbs = $('ul li:visible').eq(0).prevAll('li');
  if($prevThumbs.length != 0){
    $prevThumbs.slice(0,numberThumbs).show();
    $('ul#thumbs li:visible:gt('+(numberThumbs-1)+')').hide();
  }
  else
    $('.arrow_sx').css('visibility', 'hidden');
});

I metodi utlizzati sono analoghi a quelli della freccia destra, con la differenza che vengono selezionati tutti gli elementi precedenti a quelli visibili con prevAll().

Per approfondire l'argomento:

• jQuery selectors - Cody Lindley
• .nextAll() - jQuery API Documentation 
• .prevAll() - jQuery API Documentation