funcion que no actualiza el campo style a la primera pero si a la segunda

[Dradi7]

Iniciado por uzor

Buenas;

Quiero mostrar una imagen en la misma pagina al clickear sobre un link. Esta imagen debe estar superpuesta al la pagina web y quedar centrada.

Lo que he hecho ha sido crear un div:

Código HTML:

<div id="marco" style="display:none; top:50%; left:50%; position: fixed;">
</div> 

el link llama a una funcion javascript que cambia los valores style e inserta la imagen dentro del div:

Código PHP:

 onClick="showImg('<?php echo $url ?>');"  

Código Javascript:

function showImg(url){
    var text = "<img src='img/"+url+"'>"
    var img = new Image();
    img.src = 'img/db/'+url;
    
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width/2);
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height/2);
    document.getElementById("marco").style.display="block";
}
 

El problema es que cuando clickeo en el enlace se muestra la imagen pero sin hacer los ajustes marginLeft y marginTop, y lo mas raro es que al volver a hacer click en el link coloca bien la imagen....

Alguna sugerencia? Gracias de antemano!

Para que te pueda tomar los valores de width o height correctamente debes hacerlo en el evento onload de la imagen asi

Código Javascript:

img.onload = function(){
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width/2);
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height/2);
    document.getElementById("marco").style.display="block";
}