Trovare dimensioni immagine

[micdas]

Ho trovato questo script che visualizza in una finestra una immagine flottante sulla pagina ed una didascalia.

//Spessore del bordo colorato intorno all'immagine, lasciare vuoto se non serve
var borderimg = "15px";
//Tipo di cursore che appare passando il mouse sull'immagine, lasciare vuoto per il puntatore di default
var pointer = "pointer";

function popup(url, title) {
    var thisspan = eval("document.getElementById('popup').style")
    thisspan.visibility="visible";
    var imgs = new Image();
    imgs.src = url;
    if(imgs.complete) {
        var W=(imgs.width);
        var H=(imgs.height);
    }
    output = "<div class=\"color_div\" style=\"width:"+ (W+30)+"px\">";
    output += "<a class=\"link\" alt=\"Clicca sull\'immagine per chiudere\" style='cursor:"+ pointer +"' onclick=\"closegallery()\">";
    output += "<img src='"+ url +"' title='"+ url +"' style=\"width:"+ W +"px;height:"+ H +"px;margin:"+ borderimg +";\"><\/a>";
    output += "<p>" + title + " (" + W + " - " + H + ")<\/p><\/div>";
    document.getElementById('popup').innerHTML = output;
}

function closegallery(){document.getElementById('popup').style.visibility="hidden";}

La funzione viene richiamata con:
<a href="#" onclick="popup(immagine.gif','messaggio';return false" title="" class="thumbnail">

Inizialmente la funzione aveva quattro argomenti:
function popup(url, W, H, title)

Per evitare di cercare manualmente le dimensioni delle immagini ho tentato di togliere le dimensioni dagli argomenti della funzione trasformandola in:
function popup(url, title)

Le dimensioni delle immagini le faccio cercare al JS e parzialmente ci sono riuscito ma non funziona correttamente.
Infatti c'è l'inconveniente che, generalmente la prima volta, le dimensioni non vengono restituite ma nel test che faccio mi viene visualizzato (undefined - undefined). Occorre richiamare la funzione una seconda volta per leggere le giuste dimensioni.
Sicuramente ho commesso qualche errore, ma non riesco a capire dove, nè che tipo di errore.
Qualcuno potrebbe aiutarmi a risolvere il problema?
Ringrazio in anticipo.

[m4rko80]

Ciao, probabilmente perchè devi mettere tutto nell'if dell'img.cmplete.
Se come penso questo fa quel che deve quando l'src dell'immagine è stata caricata, è probabile che il blocco successivo venga caricato prima di questo evento.

[micdas]

Ciao m4rko80
ho appena provato a mettere tutto nella IF.
E' peggio di prima.
Mi spiego.
Se prima alla prima apertura della popup mi si apriva l'immagine con le dimensioni "undefined" e solo alla seconda apertura mi veniva immagine e dimensione, ora:
aprendo la prima immagine mi viene l'immagine e "undefined"
aprendo la seconda immagine, mi rimane ancora la prima immagine e "undefined".
Solo alla seconda apertura tutto torna normale.
Questo è l'esempio commentato e con gli script a vista on-line per vederlo dal vivo
http://mikevba.altervista.org/nuovo/...popup/test.php

Dimenticavo: per farlo funzionare nella pagina deve esserci questo DIV:
<div id="popup"></div>

Ciao

[micdas]

PS:
insomma, anche nell'errore, la risposta dello script non è sempre così lineare come come ho descritto. A volte funziona, a volte non funziona.

Va a finire che se non si trova una soluzione tornerò alla vecchia funzione che richiede come argomenti anche le dimensioni:
function popup_WH(url, W, H, title)

Ciao

[br1]

Per poterla misurare l'immagine deve esser stata caricata nel browser.
prova cosi' (non l'ho provato)

function popup(url, title) {
    var thisspan = eval("document.getElementById('popup').style")
    thisspan.visibility="visible";
    var imgs = new Image();
    
	imgs.src = url;
    imgs.onload = function() {
        var W=(imgs.width);
        var H=(imgs.height);
		output = "<div class=\"color_div\" style=\"width:"+ (W+30)+"px\">";
		output += "<a class=\"link\" alt=\"Clicca sull\'immagine per chiudere\" style='cursor:"+ pointer +"' onclick=\"closegallery()\">";
	    output += "<img src='"+ url +"' title='"+ url +"' style=\"width:"+ W +"px;height:"+ H +"px;margin:"+ borderimg +";\"><\/a>";
	    output += "<p>" + title + " (" + W + " - " + H + ")<\/p><\/div>";
		document.getElementById('popup').innerHTML = output;
	}
}

[micdas]

Ciao br1
ho subito provato con l'istruzione da te suggerita:
imgs.onload = function()
ed ho aggiornato la pagina di prova, ma non cambia nulla. La prima volta che si clicca su ciascun link vien fuori il famigerato: (undefined - undefined).
Per non trovare manualmente le dimensioni dell'immagine, mi sa che per trovarle dovrò ricorrere all'aiuto del PHP e tornare alla funzione con quattro argomenti:

function popup_WH(url, W, H, title) { 
    var thisspan = eval("document.getElementById('popup').style") 
    thisspan.visibility="visible"; 
    output = "<div class=\"color_div\">"; 
    output += "<a class=\"link\" alt=\"Clicca sull\'immagine per chiudere\" style='cursor:"+ pointer +"' onclick=\"closegallery()\">"; 
    output += "<img src='"+ url +"' title='"+ url +"' style=\"width:"+ W +"px;height:"+ H +"px;margin:"+ borderimg +";\"><\/a>"; 
    output += "<p>" + title + "<\/p><\/div>"; 
    document.getElementById('popup').innerHTML = output; 
} 

da richiamare con

<a href="#" onclick="popup_WH(immagine.gif',170,208,'messaggio';return false" title="" class="thumbnail">

Comunque fammi sapere se c'è una soluzione in JS.

[pietro09]

Ho provato questo codice (senza guardare la risposta di br1 ) e mi pare uguale al mio. A me funziona

Questo il codice che ho provato

//Spessore del bordo colorato intorno all'immagine, lasciare vuoto se non serve
var borderimg = "15px";
//Tipo di cursore che appare passando il mouse sull'immagine, lasciare vuoto per il puntatore di default
var pointer = "pointer";

function prova(url, title)
{
    var v = new Image();
    v.src = url;
    v.onload = function ()
    {
        var W = v.width;
        var H = v.height;

        var thisspan = eval("document.getElementById('popup').style")
        thisspan.visibility = "visible";
        output = "<div class=\"color_div\" style=\"width:" + (W + 30) + "px\">";
         output += "<a class=\"link\" alt=\"Clicca sull\'immagine per  chiudere\" style='cursor:" + pointer + "'  onclick=\"closegallery()\">";
        output += "<img src='" +  url + "' title='" + url + "' style=\"width:" + W + "px;height:" + H +  "px;margin:" + borderimg + ";\"><\/a>";
        output += "<p>" + title + " (" + W + " - " + H + ")<\/p><\/div>";
        document.getElementById('popup').innerHTML = output;

    };


}

function closegallery() { document.getElementById('popup').style.visibility = "hidden"; }

[micdas]

Ciao pietro09 e grazie
In effetti è simile a quello postato da br1
noto comunque che due righe sono state spostate nella v.onload = function ()

var thisspan = eval("document.getElementById('popup').style")
thisspan.visibility = "visible";

Forse è questo che fa la differenza.
Il DIV viene reso visibile dopo aver caricato l'immagine e rilevate le sue dimensioni.
Tra poco lo proverò e farò sapere.

[micdas]

Ciao pietro09
ho fatto la modifica dello spostamento delle due istruzioni

var thisspan = eval("document.getElementById('popup').style")
thisspan.visibility="visible";

mettendole dentro
imgs.onload = function()
dopo aver rilevato le dimensioni dell'immagine.

Alle volte la differenza sta nelle piccole cose.
Pare che così cominci a funzionare.
Intanto continuerò a testarlo, e vedrò se continuerà a funzionare.
Così mi risparmio il lavoro in PHP

Intanto grazie


PS:
Il link per vedere il test è sempre questo:
http://mikevba.altervista.org/nuovo/...popup/test.php

[pietro09]

Il codice di Br1 funziona perfettamente .

Ma io l'ho provato in una semplice pagina. Bisogna vedere la tua pagina che html ha

Inoltre mi pare che non serva. Se hai una immagine troppo grande, non puoi visualizzarla bene.
Io ho modificato così:

output += "<img src='" + url + "' title='" + url + "' style=\"max-width:" + W + "px;margin:" + borderimg + ";\"><\/a>";