Semplice, veloce e indolore, dicevano. Banale aggiungo io. Scontato dirà qualcuno. Cazzata qualcun’altro.

Per un progetto devo inserire delle didascalie a tutte le immagini che devo inserire. Lavoro con i CSS e due righe di codice HTML. Semplicissimo!

<span class="thumb">
</span></pre>
<div class="caption">ma che bella descrizione!</div>
<pre><span class="thumb">
<img src="/img/once/costruire_secco.jpg" alt="" />
</span>

con questo suo bel css:

.thumb{
 position: relative;
}

.caption {
 text-align: center;
 position: absolute;
 padding:4px 0px;
 z-index: 10;
 background: rgba(0,0,0,0.4);
 font-size: 10px;
 color: #fff;
 text-shadow: 0 1px 1px #000;
 bottom: 3px;
 width: 100%;
}

Niente di complicato. Si gioca un po’ con le proprietà e via di personalizzazione.

Ok, ma che palle!

certo, se volevo fare le cose semplici, copiavo e incollavo e via così per tutto il sito. Ma che palle… dov’è la mia usuale voglia di scopre qualcosa di nuovo? Dov’è il mio “problems solving”?
Benissimo: eccolo.

jQuery, dacci una mano! (e un rel!)

Ho scoperto casualmente che con jQuery è possibile recuperare il contenuto di una qualsiasi proprietà attribuita ad un tag html. come? semplice, così:

<script type="text/javascript">
 $(document).ready(function () {

 var nuovaVariabile = $(--oggetto--).attr(--cosa voglio recuperare--);

 });
</script>

Quindi ricapitolando, dove ho scritto –oggetto– devo mettere il tag, identificato volendo come classe o id, e in –cosa voglio recuperare — quello che voglio leggere.
esempio, se voglio il nome e la path di una immagine che ha classe “pathImmagine”, scriverò:

var NomeImmagine = $(“.pathImmagine”).attr(“src”);

posso sapere anche il testo ALT, il TITOLO, larghezza o altezza (sempre se espresse nel codice html, ovvio.) e via così.

Perchè mi serve? Mi serve per poterlo riutilizzare subito dopo! Come? “appendendolo” ad un altro tag!

e ora… Appendiamolo!

Perfetto, chiamo la mia immagine nel codice dandogli questa semplice struttura:

<span class="thumb">
 <img src="immagine.jpg" alt="" />
 </span>

ho scelto di usare la proprietà “REL” anzichè “ALT” o “TITLE” per evitare che al rollover, appaia quella finestrella giallina che proprio non mi piace…visto che devo visualizzarla comunque. Non ho problemi neanche con i motori di ricerca, visto che comunque il testo viene letto….

Ora, il codice jQuery è molto semplice: dopo aver recuperato il valore di “rel” ed averlo assegnato ad una variabile, lo “appendo” all’elemento “span”, creando un div exnovo. Semplice!

<script type="text/javascript">
 $(document).ready(function () {

 var imageRel = $(".thumb img").attr("rel");

 $(".thumb").append("

<div class='caption'>"+imageRel+"</div>

");
 });
</script>

taaadaaa! provare per credere!

Ok, ma se ne ho tante immagini?

Beh, se ho tante immagini da inserire con le relative didascalie, se uso lo script così com’è, questo mi ripeterà la prima didascalia su tutte le immagini. E come dargli torto, io lo prendo una volta e dico di piazzarlo su tutte le foto!
Per sistemare lo script devo rifarmi alla funzione jQuery “.each” e il suo utilizzo con “this”. In pratica diciamo che per ogni immagine (.each), fai questa cosa a questa immagine (this).
Vediamolo:

<script type="text/javascript">
$(document).ready(function(){
      $(".thumb").each(function(){
          imageRel = $("img", this).attr("rel")
          $(this).append("<div class='caption'>;"+imageRel+"</div>");
        });
  });
</script>

Così fa esattamente quello per cui è stato compilato.