Aprire l'immagine nella stessa pagina

[xlucax]

Ciao ho un problema ho realizzato una funzione che permette di aprire una foto nella stessa pagina dove sono presenti tutte le miniature delle varie foto ...

lo richiamo cosi nel tag <img> relativo alla foto
onClick=open_img("immagine.jpg")

e la funzione è la seguente:

<SCRIPT Language="Javascript">
function open_img(immagine)
{
document.getElementById("photo").innerHTML='<p align=center><font color=bbbbbb>Caricamento in corso...</font></font>';
var fatt_ridu;
var larghezza;
var altezza;
var image = new Image();
image.src = immagine;
larghezza = (image.width);
altezza = (image.height);
if(larghezza>750)
{ fatt_ridu = larghezza/750;
larghezza=750;
altezza=altezza/fatt_ridu; }
document.getElementById("photo").innerHTML='<div id=img_gal_big align=center>[img]+ immagine +[/img]</div>';
}
</script>

nella pagina ho un tag <div id=photo>

io mi aspetterei che quando clicco su una miniatura si apra nel tag <div id=photo> la relativa foto e invece non sempre lo fa al primo click a volte devo cliccare due volte a volte solo 1 , non capisco perchè faccia cosi.
se avete dei suggerimenti sono molto graditi. la pagina in questione si trova su http://www.newalva.com/ver5/galleria.php

Grazie Luca

[br1]

Perche' le dimensioni dell'immagine possono essere rilevate solo quando l'immagine stessa e' stata completamente caricata dal browser (e questo dipende dalla sua dimensione, dalla velocita' della connessione, ...).

image.src = immagine;
larghezza = (image.width);
altezza = (image.height);

come si nota invece tu tenti di rilevare le dimensioni subito dopo aver definito l'origine dell'immagine.

Possibile soluzione:

<SCRIPT Language="Javascript">
function open_img(immagine) {
  document.getElementById("photo").innerHTML='<p align=center><font color=bbbbbb>Caricamento in corso...</font></font>';
  var fatt_ridu;
  var larghezza =0;
  var altezza;
  var image = new Image();
  image.src = immagine;
  do {
    larghezza = (image.width);
    altezza = (image.height);
  } while(larghezza==0); 
  if(larghezza>750) { 
    fatt_ridu = larghezza/750;
    larghezza=750;
    altezza=altezza/fatt_ridu; 
  }
  document.getElementById("photo").innerHTML='<div id=img_gal_big align=center>[img]+ immagine +[/img]</div>';
}
</script>

ciao

[xlucax]

Sicuramente sarà come dici tu. la modifica che hai fatto è molto sensata però l'ho apportata al sito e quando clicco sull'immagine si blocca tutto (prova tu stesso www.newalva.com/ver5/galleria.php )
ma ho notato che se modifico il tuo ciclo do while in questo modo funziona

do {
larghezza = (image.width);
altezza = (image.height);
alert("passaggio");
} while(larghezza==0);

ovviamente è brutto però dopo 2 alert visualizza la foto.
Sapresti cosa posso fare x far funzonare il tuo script senza l'alert ??
ti ringrazio ancora
Luca

[br1]

In effetti il ciclo assorbe parecchie risorse alla CPU... ti conviene spezzarlo in due parti:

<SCRIPT Language="Javascript">
var image = new Image();
var larghezza = 0;
var altezza = 0;

function open_img(immagine) {
  document.getElementById("photo").innerHTML='<p align=center><font color=bbbbbb>Caricamento in corso...</font></font>';
  var fatt_ridu;
  larghezza = 0;
  altezza = 0;
  image.src = immagine;
  setTimeout("misura()",100);
}

function misura() {
  larghezza = (image.width);
  altezza = (image.height);
  if (larghezza==0||altezza==0) {
    setTimeout("misura()",100);
    return;
  }
  if(larghezza>750) { 
    fatt_ridu = larghezza/750;
    larghezza=750;
    altezza=altezza/fatt_ridu; 
  }
  document.getElementById("photo").innerHTML='<div id=img_gal_big align=center>[img]+ immagine +[/img]</div>';
}
</script>

Provala tu per me

ciao

[xlucax]

era quasi perfetto.... l'ho sistemato e cosi è una bomba...

<SCRIPT Language="Javascript">
var image = new Image();
var larghezza = 0;
var altezza = 0;

function open_img(immagine) {

document.getElementById("photo").innerHTML='<p align=center><font color=bbbbbb>Caricamento in corso...</font></font>';
var fatt_ridu=0;
larghezza = 0;
altezza = 0;
image.src = immagine;
setTimeout("misura(image,larghezza,altezza)",100);

}

function misura(image,larghezza,altezza) {
larghezza = (image.width);
altezza = (image.height);
if (larghezza==0||altezza==0) {
setTimeout("misura(image,larghezza,altezza)",100);
return;
}
if(larghezza>750) {
fatt_ridu = larghezza/750;
larghezza=750;
altezza=altezza/fatt_ridu;
}
document.getElementById("photo").innerHTML='<div id=img_gal_big align=center>[img]+ image.src +[/img]</div>';
}
</script>

ti ringrazio...
Ciao e buona serata!!