Perché questo js non vuole essere contenuto entro un div?

[bsproj]

Ciao a tutti,
sul mio sito in Joomla dispongo di uno script caption.js che mi permette di visualizzare le didascalie sotto le immagini alle quali attribuisco il tag class="caption".

Questo js preleva il contenuto del tag title attribuito all'immagine, e lo rende visibile sotto a quest'ultima generando automaticamente questo codice:

<div class="img_caption none" style="float: none; max-width: 640px;">
    <img class="caption" alt="immagine" src="url.jpg" title="Didascalia"></img>
    <p class="img_caption">Didascalia</p>
</div>

Questo js funziona perfettamente fintanto che le immagini sono libere nell'articolo. Tuttavia, se provo ad inserire l'immagine all'interno di un ulteriore div, l'immagine e la sua didascalia vengono "portate fuori" dal quest'ultimo.

In altre parole, questo codice...

<div>
    <img class="caption" alt="immagine" src="url.jpg" title="Didascalia">
</div>

... genera questo codice...

<div class="img_caption none" style="float: none; max-width: 640px;">
    <img class="caption" alt="immagine" src="url.jpg" title="Didascalia"></img>
    <p class="img_caption">Didascalia</p>
</div>
<div>
</div>

... anziché questo:

<div>
   <div class="img_caption none" style="float: none; max-width: 640px;">
      <img class="caption" alt="immagine" src="url.jpg" title="Didascalia"></img>
      <p class="img_caption">Didascalia</p>
   </div>
</div>

Il codice di caption.js è questo:

var JCaption=function(c){var e,b,a=function(f){e=jQuery.noConflict();b=f;e(b).each(function(g,h){d(h)})},d=function(i){var h=e(i),f=h.attr("title"),j=h.attr("width")||i.width,l=h.attr("align")||h.css("float")||i.style.styleFloat||"none",g=e("<p/>",{text:f,"class":b.replace(".","_")}),k=e("<div/>",{"class":b.replace(".","_")+" "+l,css:{"float":l,"max-width":j}});h.parent().before(k,h);k.append(h);if(f!==""){k.append(g)}};a(c)};

Una delle pagine nelle quali ho impiegato questo js è qui.

Avete idea di quale possa essere la causa di questo strano risultato?

Grazie a chiunque abbia qualche idea!

Ciao,
Niki

[Enzaccio]

.. dispongo di uno script caption.js .. visualizzare le didascalie sotto le immagini ..

.. preleva il contenuto del tag title .. generando .. codice:

.. se provo ad inserire l'immagine all'interno di un ulteriore div, ..

Quando? succede che preleva il contenuto, al caricamento della pagina? cliccando sull' immagine?

Se inserisci immagini di qua e di la', perché non metterci già la didascalia? Visto che già il TITLE lo compili manualmente IMG dopo IMG, vero?

In parole povere, ho sbirciato un po' tra tutto quel codice criptico, ma non intendo parsarlo con le pupille quindi, visto che scrivi bene, aggiungi un post e confessa tutto ...

Epperocché questo sotto da solo, così come lo citi, dovrebbe essere il core pulsante:

<script src="http://bsproj.it/media/system/js/caption.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery(window).on('load',  function() {
                new JCaption('img.caption');
            });
  </script>
<div>
    <img class="caption" alt="immagine" src="url.jpg" title="Didascalia">
</div>

ma non fa' un bel niente.

Ho provato a cliccare sulle immagini di quella pagina, a vedere se dovesse uscire una sorta di light-box, ma qua non pop-up nulla, se non i ricordi di quando compravo "Radio Elettronica" in edicola, anni '70.

E poi dove lo vedi che ... genera questo codice..., ri-salvando la pagina o da selection source ? Dacché quello che scrive JS dietro al Browser, rimane ignoto ai comuni mortali; anche a quelli che sappino andarlo a vederlo il codice sorgivo.

[bsproj]

Ciao Enzaccio, grazie per la risposta.

Subito sotto alla prima immagine della pagina si dovrebbe vedere la didascalia ("Fig. 1 - Equalizzatore RIAA non-invertente"). Nei miei browser si vede correttamente, ma ci mette qualche secondo a comparire.

Per rispondere alle tue altre domande, ti dico che la didascalia viene mostrata automaticamente al momento del caricamento della pagina.

Il codice che ho copiato nel primo box è quello che posso vedere se provo a visualizzare la sorgente HTML della pagina (ad esempio, usando Firebug). Tu non riesci a vedere niente di simile in prossimità dell'immagine?

Ciao,
Niki