posisionar imagen en el centro

[Blashak]

Buenas,

tengo una web donde me muestra 10 fotos que tengo en una array y al hacer click en cada una de ellas las muestra en grande sobre el centro de la pantalla.

El problema es que al hacer click la primera ves sobre una foto me da de ancho y alto y me las posisiona en cualquier lado pero al haer click por segunda ves te da el ancho y alto de la imagen correcta entonces la posisiona en el centro.

alguien sabe porque??

les dejo el codigo

Código Javascript:

//creamos un objeto imagen
img = document.createElement('img');
//guardamos la imagen sobre ese objeto
img.setAttribute("src","img/fotos/"+i+".jpg");
//guardamos el ancho en la variable
var ancho = img.width;
//guardamos el alto en la variable
var alto = img.height;
var total_ancho = "-"+ancho/2+"px";
var total_alto = "-"+alto/2+"px";
//posisionamos la imagen en el centro
img.style.position = "relative";
img.style.top = "50%";
img.style.left = "50%";
img.style.marginLeft=total_ancho;
img.style.marginTop=total_alto;
img.style.border = "3px solid #FFF";
img.setAttribute("id","foto");
 

saludos

[Panino5001]

Hasta que la imagen no ha cargado no están disponibles width y height.
Deberás usar el constructor Image y el evento onload:

Código PHP:

  var src='loquesea.jpg'; 
var im=new Image(); 
im.src=src+'?'+new Date().getTime(); 
im.onload=function(){ 
    var W=im.width; 
    var H=im.height; 
}  
   

[maycolalvarez]

estas usando position relative, como como lo indica su nombre su posición varía según el flujo del DOM, si quieres algo más preciso usa absolute.

[caricatos]

Iniciado por Panino5001

Hasta que la imagen no ha cargado no están disponibles width y height.
Deberás usar el constructor Image y el evento onload:

Código PHP:

  var src='loquesea.jpg'; 
var im=new Image(); 
im.src=src+'?'+new Date().getTime(); 
im.onload=function(){ 
    var W=im.width; 
    var H=im.height; 
}  
   

Hola:

Aunque parezca una chorrada, la línea del onload yo la pondría antes de la asignación de la url...

Saludos

[Blashak]

Buenas,
al usar en onload la imagen primero se ve desentrada y a los dos segundo se centra.
porque puede ser???

Código Javascript:

img.onload=function(){
 
              var ancho = img.width;
 
              var alto = img.height;
 
              var total_ancho = "-"+ancho/2+"px";
 
              var total_alto = "-"+alto/2+"px";
 
      img.style.position = "absolute";
 
              img.style.top = "50%";
 
              img.style.left = "50%";
 
              img.style.marginLeft=total_ancho;
 
              img.style.marginTop=total_alto;
  
              img.style.border = "3px solid #FFF";
 
              img.setAttribute("id","foto");   
 
          }  
         
 
      pantalla.appendChild(img);
 

saludos

[caricatos]

Hola:

Evidentemente, son dos segundos los que necesita el navegador y tu conexión de internet en cargar la imagen... y en consecuencia, saber el ancho y alto para hacer los cálculos...

Lo que empieza por on significa la respuesta a un evento, o sea en este caso concreto, cuando se carga esa imagen (o sea, que se pueden obtener las propiedades como anchura y altura)

Saludos

[Blashak]

Iniciado por caricatos

Hola:

Evidentemente, son dos segundos los que necesita el navegador y tu conexión de internet en cargar la imagen... y en consecuencia, saber el ancho y alto para hacer los cálculos...

Lo que empieza por on significa la respuesta a un evento, o sea en este caso concreto, cuando se carga esa imagen (o sea, que se pueden obtener las propiedades como anchura y altura)

Saludos

vale, depsues de leer esto es normal que suceda esto. entonces como puedo poner que depsues de hacer todos estos pasos.

Código Javascript:

img = document.createElement('img');
    img.setAttribute("src","../img/varices/"+i+".jpg");
    var ancho = img.width;
        var alto = img.height;
        var total_ancho = "-"+ancho/2+"px";
        var total_alto = "-"+alto/2+"px";
             img.style.position = "absolute";
        img.style.top = "50%";
        img.style.left = "50%";
        img.style.marginLeft=total_ancho;
        img.style.marginTop=total_alto;
        img.style.border = "3px solid #FFF";
        img.setAttribute("id","foto");
 
la i es un parametro pasado de otra funcion segun la foto en la que hace click
 

me cargue la imagen cuando termine de hacer todo eso??