Negli ultimi tempi sono stato impegnato in un progetto per WordPress che prevedeva la creazione di una galleria di immagini gestita dal plugin jQuery Masonry. Di seguito i miei tentativi, non sempre di successo.
La galleria
La galleria ha la seguente struttura:
<ul id="gallery">
<li>
<a href="percorso/immagine-full.jpg"><img src="percorso/immagine-thumb.jpg" alt=""/></a>
</li>
<!-- altre voci -->
</ul>
Quando si clicca su una miniatura si deve aprire la corrispondente immagine a piene dimensioni. Nello stesso tempo la galleria deve risistemarsi per ospitare la nuova immagine.
Parte prima
Sono stato tratto in inganno dal concetto di reflow nel plugin Masonry. Il plugin Masonry non vuole che voi aggiungiate una nuova voce di lista all'inizio della galleria, anche se la sua sintassi lo prevede:
var $container = $('#gallery');
$container.prepend('<li></li>').masonry('reload');
Il metodo reload funziona perfettamente se le dimensioni del contenuto del nuovo elemento sono uguali alle dimensioni di ciascuna
cella della griglia. In caso contrario, per effetto dell'ordine di stacking del posizionamento assoluto CSS, la nuova voce scivola sotto le altre.
Parte seconda
L'approccio da seguire è un altro: l'immagine ingrandita non deve essere inserita in una nuova voce di lista, ma all'interno della stessa voce di lista che contiene la thumbnail.
In questo modo il metodo reload funziona perfettamente, specie se lo usiamo all'interno dell'evento load dell'immagine
appena creata.
Conclusione
Il plugin Masonry è perfetto per griglie statiche ma necessita di accorgimenti particolari qualora si voglia aggiungere del dinamismo alla griglia.