Una thumbnail gallery in HTML, CSS e jQuery

L’obiettivo L’obiettivo di questo articolo è quello di aiutarti a creare una thumbnail gallery composta da miniature che occupano tutto […]
Una thumbnail gallery in HTML, CSS e jQuery

L’obiettivo

L’obiettivo di questo articolo è quello di aiutarti a creare una thumbnail gallery composta da miniature che occupano tutto lo spazio a disposizione quasiasi sia la risuluzione video o la dimensione del parent. Questa gallery è ottimale per essere utilizzata in tutti quei casi nei quali la dimensione del parent non ha un valore definito, come ad esempio i layout liquidi oppure le versioni mobile degli stessi!
Per avere un quadro completo guarda subito la demo che abbiamo preparato per te, ti aiuterà a capire meglio di cosa stiamo parlando.

La parte html

L’html consiste in una semplice lista contente immagini.

<ul>
    <li><a href="#"><img src="image01.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="image02.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="imageN.jpg" alt="imageN" /></a></li>
</ul>

La parte CSS

Per loro natura gli elementi di una lista sono di tipo blocco. A te la scelta se formattarli con il classsico metodo float, utilizzando la proprietà clip per ottenere immagini tutte della stessa altezza, oppure modificando il valore della proprietà display da block a inline block; modifica che ti consetirà di manternere le diverse altezze delle immagini ma al contempo di ottenere il controllo sul loro allineamento; al rigurado ti consiglio di rileggere questo e quest’altro articolo.

Nel nostro esempio abbiamo utilizzato il classico metodo del float, senza complicare ulteriormente il codice CSS per gestire immagini con altezze differenti. Avremmo per puro semplicismo accademico, immagini ritagliate e della stessa altezza. Starà a voi impiegare questo o quel metodo in base alle vostre esigenze grafiche! Il CSS seguente setta le prorietà di margini – padding e bordi per tutti gli “li” tralasciando volutamente il valore di width, che verrà iniettato dinamicamente tramite jquery in relazione allo spazio disponibile. Le immagini invece hanno impostato come valore di width il 100% del proprio parent.

ul { /* Easy Clear */
    width:auto;
    overflow:hidden
}
ul li {
    float: left;
    margin: 0 5px 5px;
    border: 1px solid #ccc;
    padding: 4px;
}
ul li img {
    display: block;
    width: 100%;
}

Prima di passare alla parte js, ti consiglio di andarti a rileggere l’articolo sulla formattazione degli elementi di blocco e il boxmodel.

Introduzione alla parte jQuery

Lo script di per se non è complesso. E’ un sistema composto da alcune costanti e da un’unica variabile (la width degli “li”). Se hai riletto l’articolo sul boxmodel ricorderai bene che il valore del “riquadro elemento” è dato della somma delle 7 proprietà della formattazione orizzontale (o verticale). Nel nostro sistema abbiamo come definiti tutti i (6) valori del riquadro elemento degli “li” tranne la width che è la nostra incognita. Il seguente script ci fornirà, tramite un algoritmo scritto da Manuel Kanah (responsabile area tech Sitonline, azienda per la quale lavoro) il valore dinamico della width. Per cui adesso lascio la parola a lui, che saprà meglio di me illustrare lo script che lui stesso ha scritto.

Lo script a cura di Manuel Kanah

Lo script, come pocanzi detto, necessita di valorizzare alcune variabili affinchè il calcolo della larghezza dei singoli elementi sia effettuato correttamente. Prima di tutto imposto il valore massimo di width che ogni singolo elemento può avere. Nel nostro caso,ma avrei potuto scegliere qualsiasi altro valore, ogni singolo “li” può raggiungere massimo 100px di larghezza (elementWidth = 100). Il valore della seconda variabile, “elementWidthDelta”, è ottenuto facendo la diferenza tra la width del “li” e l’outerWidth dello stesso e rappresenta la somma di padding, border e margin. Infine il valore della variabile “parentWidth” che rappresenta la width del parent (ul) dei singoli elementi.

La stringa di riproporzionamento prende i tre valori prima descritti e fa quanto segue:

  1. Divide lo spazio a disposizione per il valore di “elementWidth” più il valore di “elementWidthDelta” (precedentemente ricavato dal css).
  2. Il risultato di questa operazione viene arrotondato per eccesso. Questo valore viene usato per ridividere la width del “ul” per trovare quale sarà la quantità massima di elementi per linea, ricavando così il valore in pixel della larghezza di ognuno di essi.
  3. Eseguo infine una proporzione per trasformare il valore da pixel in percentuale, valore che sarà poi assegnato alla width dei nostri elementi. Su questo punto leggi la nota a fondo pagina riguardante il browser Opera.

Lo stesso calcolo di riproporzionamento verrà fatto girare in due casi:

  1. Nel primo, quando la pagina è già caricata (load) e le immagini hanno già occupato il loro spazio in modo che non compaia lo scroll dopo il calcolo della larghezza (problema riscontrato su chrome e fixato).
  2. Nel secondo, ogni qual volta venga ridimensionato il browser(resize).
$(document).ready(function() {
    elementWidth = 100; // larghezza massima degli elementi in pixel
    gallery = $('#gallery');	
    elementWidthDelta = $('li:first', gallery).outerWidth(true)-$('li:first', gallery).width();
    scaleImages = function() {
	var parentWidth = gallery.width();
	$('li', gallery).css('width',(((parentWidth/(Math.ceil(parentWidth/(elementWidth+elementWidthDelta))))-elementWidthDelta)*100/parentWidth)+'%');
    };
});

$(window).load(function(){
    scaleImages();
});

$(window).resize(function() {
    scaleImages();
});

Conclusioni

L’html utilizzato per realizzare la gallery è come sempre, completamente customizzabile, facendo attenzione a modificare di conseguenza il css e lo script. L’unico appunto da fare è che il browser Opera, arrotonda per eccesso la larghezza degli elementi, causando a volte degli scompensi e disallineamenti. Come al solito, per qualsiasi chiarimento o semplicemente per farci sapere se ti è piaciuto l’articolo, utilizzate i commenti o la bacheca di facebook della fanpage!

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github