Per rispondere alle tue domande che ho ricevuto in privato:
- Il testo all'interno del balloon, è quello inserito nell'attributo "title" del tag che attiva lo script;
Nel caso di quello che ho messo io, il tag è
<a class="jcepopup" href="
http://abaca.altervista.org/images/agre.jpg" target="_blank">
(infatti lo script si attiva per .jcepopup); come si nota, questo tag non ha l'attributo title; di conseguenza lo script lo va a prendere dal primo degli elementi annidati al suo interno che ce l'ha (ovvero l'immagine); di norma ti conviene mettere l'attributo title direttamente sul tag che attiva lo script; l'attributo ha la seguente sintassi:
title="testo che vuoi nel balloon"
In assenza di attributo title lo script non si attiva, anche se magari è correttamente configurato;
Nel nostro caso, il tag di attivazione avrebbe dovuto essere:
<a class="jcepopup" title="L'agriturismo visto dall'alto" href="
http://abaca.altervista.org/images/agre.jpg" target="_blank">
Tuttavia avevo già messo il title nell'immagine all'interno per cui non ho ripetuto il title anche qui...
Questa cosa l'avevo specificata nei post di spiegazione
Per quanto riguarda l'attivazione sull'immagine a lato, vale la stessa cosa:
hai provato ad attivare lo script sullo span:
<span class="jcemediabox-zoom-image"></span>
Ma non funziona, perché questo span, insieme al tag dell'immagine, è compreso in uno span che lo contiene:
<span class="jcemediabox-zoom-span" style="vertical-align: middle; margin: 0px; padding: 0px; border: 0px none rgb(255, 255, 255); float: none; width: 314px;">il tag dell'immagine e quello che hai provato a usare tu, sono qui dentro</span>
questo span, come valeva per il caso precedente è soggetto allo cript della mediabox, che hai attivato sulle tue immagini, pertanto non può essere (né lui né gli elementi che contiene) oggetto dello script balloon;
L'elemento giusto su cui attivare lo script è, come nel caso precedente, il tag "a" che contiene tutti i tag descritti sopra, ovvero questo:
<a id="Le olive" class="jcepopup" href="
http://abaca.altervista.org/images/Fotolia_olive.jpg" target="_blank">
Ma a guardarlo bene, presenta anch'esso la classe "jcepopup", esattamente come l'altra immagine; infatti essendo che le due immagini sono tutte e due oggetto dell'effetto mediabox, le loro strutture sono uguali.
Dato che lo script già si attiva sugli elementi con classe .jcepopup, dal punto di vista dello script sei già a posto; hai anche già messo l'attributo title sull'altra immagine, ma allora perché lo script non si attiva anche su quella?
Semplice, perché lo script si trova all'interno di un altro articolo, quindi reagisce solo all'interno di quell'articolo;
Prendi lo script dal primo articolo, quello dove funziona, taglialo via da lì, salva l'articolo senza script, e incollalo nella pagina principale del template (dove hai messo la chiamata di jquery.balloon.js, subito dopo di quella riga).
Così facendo lo script sarà attivo su tutto il sito, e lavorerà su tutte le parti del sito che hanno classe .jcepopup
Per completezza ti illustro anche l'altra soluzione:
ogni elemento html può avere più di una classe; si potrebbe aggiungere, in ognuno dei due articoli, nel tag "a" che usiamo per attivare lo script balloon, una nuova classe; ad esempio balloon1 e balloon2; le classi aggiuntive vanno separate da spazio;
quindi il tag del primo articolo diverrebbe <a class="jcepopup balloon1".........
e quello del secondo articolo diverrebbe <a class="jcepopup balloon2 ........
Ora in ognuno dei due articoli si può inserire uno script, nel primo articolo che si attivi con selettore .balloon1, nel secondo con selettore .balloon2;
La differenza? Nel primo caso hai uno script attivato sull'intero sito (potrebbe accadere che su alcuni elementi di classe .jcepopup con l'attributo title non si voglia attivare il balloon, ma in questo caso è impossibile, si attiverebbe comunque)
Nel secondo caso hai due script specifici confinati negli articoli, ma hai più codice sul sito; se lo facessi tante volte appesantiresti la struttura...