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

Le gallerie di immagini realizzate attraverso l'utilizzo del solo Javascript costituiscono una possibilità alternativa e di crescente diffusione rispetto all'uso di Flash per la presentazione di foto ed immagini.

Nell'esempio che presenteremo verrà utilizzato jQuery, nella versione attualmente disponibile (1.3.2), per realizzare una semplice image gallery a scorrimento orizzontale. Ecco subito il link alla demo.

Per avere un approccio corretto ad un sviluppo progressivo dei contenuti, è imprescindibile partire da una versione di gallery che sia completamente fruibile senza Javascript e che XHTML e CSS siano in grado di offrire una buona flessibilità allo scopo. Pertanto sarà necessario prestare la stessa attenzione sia allo sviluppo della struttura della gallery quanto alla realizzazione dello script.

Il markup

Scegliamo quindi di rappresentare la nostra gallery come una consueta lista non ordinata <ul> in cui le immagini si troveranno dentro i list-items <li> da disporre orizzontalmente. Il codice minimale è così strutturato:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery simple image gallery</title>
</head>

<body>

  <div class="imagegallery">
    <ul>
      <li><img src="img/laghi-dei-piani-small.jpg" alt=""  /></li>
      <li><img src="img/laghi-dei-piani-medium.jpg" alt="" /></li>
      <li><img src="img/laghi-dei-piani.jpg" alt="" alt="" /></li>
      <li><img src="img/laghi-dei-piani-medium.jpg" alt="" /></li>
      <li><img src="img/laghi-dei-piani-small.jpg" alt="" /></li>
    </ul>
  </div>

</body>
</html>

Il CSS

Affiancheremo quindi i list-items ma, invece di fare ricorso al consueto posizionamento tramite la proprietà float, utilizzeremo la proprietà display: inline-block.

I vantaggi di questa soluzione sono molteplici perché:

non usando blocchi in float non dovremo preoccuparci di effettuare un clearing sulla lista;
a differenza dei float possiamo evitare di specificare la larghezza dei list-items e/o la larghezza complessiva della lista <ul>. Ciò ovviamente ci consentirà di inserire un numero indefinito di immagini di larghezza qualsiasi, senza dover dipendere da specifiche misure o impostazioni;
se abbiamo immagini di altezze differenti, attraverso la proprietà vertical-align sui list-items potremo decidere come allinearle verticalmente (ad esempio possiamo centrarle con 'middle' o metterle in bottom), anche in questo caso senza conoscere a priori le dimensioni (altezza) delle immagini stesse.

Pagina successiva

Pagine: