Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » JQuery

Pagine:

RSS Download

Una image gallery accessibile con jQuery e inline-blocks

di: Fabrizio Calderan 27 Aprile 2009

Se la larghezza complessiva dei list-items supera in orizzontale la larghezza visibile della gallery aggiungeremo i controlli necessari per scorrerla attraverso il metodo privato _addGalleryActions().

var _addGalleryActions = function(self)
{
  $('<p class="gallerycontrols"></p>').appendTo(self.g['cnt']);
  self.actionsCnt = $('p.gallerycontrols', self.g['cnt']);
  
  var addAction = function(label, classname, f) 
  {
    $('<a></a>')
      .html(label)
      .attr('href', 'javascript:void(0)')
      .attr('class', classname)
      .bind('click', f)
      .appendTo(self.actionsCnt);
  };
  
  /* azioni 'prev' e 'next' */
  addAction(_actions['prev'], 'prev', function() { return _imageClick('prev', self); });
  addAction(_actions['next'], 'next', function() { return _imageClick('next', self); });
  
  /* il link 'previous' è disabilitato allo stato iniziale */
  $('a.prev', self.actionsCnt).addClass('disabled');
};

Il metodo in questione aggiunge un paragrafo all'interno del div contenitore e la funzione addAction si occupa di creare dinamicamente un link a cui viene assegnata una caption ("html(...)") e una funzione all'evento click ("bind(...)").

La funzione addAction() viene eseguita due volte per creare il link 'precedente' e 'successivo' facendo un binding al metodo privato _imageClick(). Disabilitiamo quindi il link 'previous' allo stato iniziale.

var _imageClick = function(direction, self) 
{
  switch (direction)
  {
    case 'prev' :
      if (self.g['offset'] < 0)
      {
        self.g['offset'] += self.imagesWidth[self.currentphoto-2];
        self.g['list'].animate({ 'left' : self.g['offset'] }, _scrollTime);
        self.currentphoto--;
        
        /* abilito next e disabilito prev se sono all'inizio della gallery */
        $('a.next', self.actionsCnt).removeClass('disabled');
        $('a.prev', self.actionsCnt).toggleClass('disabled', self.g['offset'] >= 0);
      };
    break;
    
    case 'next' :
      if (self.g['offset'] > -(self.listWidth - self.g['width']))
      {
        self.g['offset'] -= self.imagesWidth[self.currentphoto-1];
        
        /* lo spostamento della gallery deve considerare la parte restante che può essere
           minore rispetto alla larghezza del <li> successivo. Spostiamo la gallery del
           valore minimo tra i due. */
        self.g['list'].animate({ 'left' : -(Math.min(-self.g['offset'], (self.listWidth - self.g['width']))) }, _scrollTime);
        self.currentphoto++;
        
        /* abilito prev e disabilito next se sono alla fine della gallery */
        $('a.prev', self.actionsCnt).removeClass('disabled');
        $('a.next', self.actionsCnt).toggleClass('disabled', self.g['offset'] <= -(self.listWidth - self.g['width']));
      };
    break;
  };
  return false;
};

La funzione _imageClick() si occupa di animare la gallery (ovvero l'elemento lista). Quando viene richiesta la foto precedente, la gallery scrolla verso destra di un numero di pixel pari alla larghezza del list-item precedente.

Se invece viene richiesta la foto successiva va verificato se la distanza rimasta alla fine della gallery è minore rispetto alla larghezza della foto successiva. Ciò determinerà uno scroll differente a seconda dei casi.

Al termine dell'animazione verifichiamo le condizioni secondo cui dobbiamo disabilitare e/o abilitare le azioni 'precedente' e 'successivo'. La proprietà privata _scrollTime (impostata all'inizio dello script a 500ms) determina il tempo di transizione tra una immagine e l'altra.

$('document').ready(...) vs. window.onload

È importante ricordare che l'evento $('document').ready(...) di jQuery potrebbe facilmente scattare prima del completo caricamento delle immagini e ciò comporterebbe un evidente errore nella lettura della dimensione totale della gallery; pertanto è opportuno attivare lo script all'evento window.onload.

Se si vuole comunque eseguire lo script all'evento $('document').ready(...) è sufficiente impostare una width a ciascun <li> attraverso i CSS.

Il funzionamento (con Javascript abilitato e non) è stato verificato con successo in un buon numero di browser (IE6, IE7, IE8 (compatibility view compresa), Safari 3 e 4, Firefox 2 e 3, Opera 9.63). Lo script ha un peso di 3.7kb (1.9kb minified e 1.3kb se compresso lato server).

I file della demo sono disponibili per il download.