aaa

Una semplice didascalia alla foto. con jQuery e “rel”.

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!

<br />
&lt;span class=&quot;thumb&quot;&gt;<br />
&lt;/span&gt;&lt;/pre&gt;<br />
&lt;div class=&quot;caption&quot;&gt;ma che bella descrizione!&lt;/div&gt;<br />
&lt;pre&gt;&lt;span class=&quot;thumb&quot;&gt;<br />
&lt;img src=&quot;/img/once/costruire_secco.jpg&quot; alt=&quot;&quot; /&gt;<br />
&lt;/span&gt;<br />

con questo suo bel css:

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

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ì:

<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
 $(document).ready(function () {</p>
<p> var nuovaVariabile = $(--oggetto--).attr(--cosa voglio recuperare--);</p>
<p> });<br />
&lt;/script&gt;</p>
<p>

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:

</p>
<p>&lt;span class=&quot;thumb&quot;&gt;<br />
 &lt;img src=&quot;immagine.jpg&quot; alt=&quot;&quot; /&gt;<br />
 &lt;/span&gt;</p>
<p>

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!

<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
 $(document).ready(function () {</p>
<p> var imageRel = $(&quot;.thumb img&quot;).attr(&quot;rel&quot;);</p>
<p> $(&quot;.thumb&quot;).append(&quot;</p>
<p>&lt;div class='caption'&gt;&quot;+imageRel+&quot;&lt;/div&gt;</p>
<p>&quot;);<br />
 });<br />
&lt;/script&gt;

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:

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

Così fa esattamente quello per cui è stato compilato.

Attendere prego… nascondere il submit con jQuery

loading! Sul sito di Gianni Favilli (www.giannifavilli.it) hotrovatoquesto script in jQuery comodo per nascondere il pulsante “submit” quando di preme, per evitare che l’utente lo prema più volte.
Ecco lo script da inserire nell'<head>:

/* inizio javascript */<br />
&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[<br />
$(document).ready(function(){<br />
        $('#loading').hide(); // la pagina viene caricata con il div id 'loading' nascosto<br />
        $('#bottoneinvia').click(function() { // al click sul bottone applica la segunete funzione<br />
        $('#bottoneinvia').hide(); // nasconde il bottone invia<br />
        $('#loading').show(); // visualizza il div 'loading'<br />
        $('#form').submit(); // elabora il form<br />
    });<br />
});<br />
// ]]&gt;&lt;/script&gt;<br />
/* fine javascript */

E questo nell’HTML

&lt;!-- inizio del form con ID 'form' --&gt;&lt;/pre&gt;<br />
&lt;form id=&quot;form&quot; action=&quot;#&quot; method=&quot;post&quot; name=&quot;form&quot;&gt;<br />
&lt; label for=&quot;label01&quot;&gt;label01</p>
<p>&lt;input id=&quot;label01&quot; type=&quot;text&quot; name=&quot;label01&quot; value=&quot;&quot; /&gt;</p>
<p>&lt;label for=&quot;label02&quot;&gt;label02&lt;/label&gt;</p>
<p>&lt;input id=&quot;label02&quot; type=&quot;text&quot; name=&quot;label02&quot; value=&quot;&quot; /&gt;</p>
<p>&lt;label for=&quot;label03&quot;&gt;label03&lt;/label&gt;</p>
<p>&lt;textarea id=&quot;label03&quot; name=&quot;label03&quot;&gt;&lt;/textarea&gt;</p>
<p>&lt;!-- paragrafo con all'interno il bottone di invio --&gt;</p>
<p>&lt;input id=&quot;button&quot; type=&quot;submit&quot; name=&quot;button&quot; value=&quot;Submit&quot; /&gt;</p>
<p>&lt; !-- fine paragrafo --&gt;&lt;/form&gt;<br />
&lt;pre&gt;<br />
&lt;!-- fine form --&gt;</p>
<p>&lt;!-- div con all'inerno un titolo e un immagine di attesa --&gt;&lt;/pre&gt;<br />
&lt;div id=&quot;loading&quot;&gt;<br />
&lt;h3&gt;Please Wait...&lt;/h3&gt;<br />
&lt;img src=&quot;loader.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;<br />
&lt;pre&gt;<br />
&lt;!-- fine del div --&gt;<br />

e nel CSS

<br />
#loading {<br />
   display:none;<br />
   position:fixed;<br />
   left:0;<br />
   top:0;<br />
   width:100%;<br />
   height:100%;<br />
   background-image:url(&quot;transparentbg.png&quot;);<br />
}<br />

Dove transparentbg.png è un immagine con una trasparenza (o alpha) dell’80% (o come più vi piace) della grandezza di 25px per 25px.

Back to top