Fw

Wordpress Creative Developer

Guida WordPress – Gestione degli Elementi in Una Griglia

  • Guide Wordpress
  • -

In un sito che sto finendo di sviluppare con WordPress, fra le richieste c’era quella di riempire dei “buchi” nelle gallerie fotografiche disposte a griglia.

Guida WordPress - Gestione degli Elementi in Una Griglia

In questa guida, voglio spiegarti come ho affrontato questa richiesta, grazie all’utilizzo di jQuery.

Il Problema

La richiesta è di riempire eventuali spazi vuoti in una galleria di immagini disposta a griglia disposta su 3 colonne.

Ad esempio se ho una galleria con 10 foto, ci sono 3 righe piene, e una con due spazi vuoti. Questi spazi vuoti si vuole che vengano riempiti con il logo dell’azienda.

jQuery è la risposta

Il ragionamento che ho fatto è questo:

  1. Conto quante immagini ci sono;
  2. Divido la quantità di immagini per tre e recupero il resto della divisione: ad esempio se  divido 10 per 3, ho un resto di 1 e gli spazi da riempire sono due, se divido 11 per 3 ho il resto di 2 e ho uno spazio da riempire.

Ora supponiamo che le immagini sono inserite attraverso una lista non ordinata; andremo a contare tutti gli elementi di una lista.

Vediamo il codice e poi lo commento sotto:

var tot = jQuery('#gallery li').length;
var resto = tot%3;
if (resto==1) {
jQuery("#gallery li").last().after('<li class="gallery-item placeholder"></li><img src="logo.jpg" /><li class="gallery-item placeholder"><img src="logo.jpg" /></li>');
} else if (resto==2) {
jQuery("#gallery li").last().after('<li class="gallery-item placeholder"><img src="logo.jpg" /></li>');
}

Nella variabile tot, viene assegnato il numero di <li> presenti nella pagina, grazie alla proprietà length.

Poi viene fatto il modulo del risultato per 3 (%), dove il modulo è l’operazione che restituisce il resto della divisione.

Infine viene fatto un controllo: se il modulo è uguale a uno, vuol dire che ci sono due spazi da riempire e quindi vengono inserite due immagini dopo (after()) l’ultimo elemento della lista (last()), se invece è uguale a due, viene inserita un’immagine.

Tutto chiaro? Per qualsiasi dubbio chiedi pure nei commenti 😉

1 commento

  1. Grazie mille per le vostre guide che rendono anche le procedure un po più complicate di semplice esecuzione.

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *