Problema al centrar imagenes con jquery/javascript

Marti1982 · #1 (**permalink**) 03/03/2011, 05:02

Veréis tengo un problema al intentar centrar imágenes verticalmente mediante jquery. Os copio el código tal y como lo tengo ahora:

index.php:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin t&#237;tulo</title>
    <script src="include/js/jquery-1.5.1.min.js" language="javascript"></script>
    <script src="include/js/my_jquery_scripts.js" language="javascript"></script>
    
    <style>
        .img_div {
            float: left;
            padding: 0 20px;
        }
        
        .img_thumb {
            float: left;
        }
    </style>
</head>

<body>
    <div class="img_div" style ="border: 1px solid;">
        <div class="img_div">
            <img class="img_thumb" src="imgs/thumb/01.jpg" />
        </div>
        <div class="img_div">
            <img class="img_thumb" src="imgs/thumb/02.jpg" />
        </div>
        <div class="img_div">
            <img class="img_thumb" src="imgs/thumb/03.jpg" />
        </div>
        <div class="img_div">
         <img class="img_thumb" src="imgs/thumb/04.jpg" />
        </div>
        <div class="img_div">
            <img class="img_thumb" src="imgs/thumb/05.jpg" />
        </div>
    </div>
</body>
</html>

my_jquery_scripts.js:

Código PHP:

  $(document).ready(function() {

        /* Centrar altura de cada imagen respecto a div padre */
    
        // Altura de div "padre"
    var altura_div_padre = $(".img_div").css("height");
    var altura_div_padre = altura_div_padre.slice(0, -2);
    
    $(".img_thumb").each(function() {
        
        // Altura de la imagen
        var altura_img = $(this).attr("height");
        
        // Restamos altura del div "padre" y dividimos entre 2 redondeando a entero
        var resto_altura = Math.round((altura_div_padre - altura_img) / 2);
        
        // Centramos la imagen con el resultado
        $(this).css("position" , "relative").css("top" , resto_altura);
    });

});

El script funciona perfecto SOLO SI NO es la primera vez que visitas la página (o pulsas Ctrl+F5), es decir, si entras por primera vez no funciona, a partir de ahí ya puedes recargas tantas veces como quieras que funciona sin problemas.

Lo he probado tanto el locahost como en servidor.

Aqui teneis el enlace donde podeis comprobar el problema. Centrar imgs

Espero que me podais echar una mano, porque llevo desde ayer simplificando código y no hay manera. Desde ya muchas gracias.

marlanga · #2 (**permalink**) 03/03/2011, 05:27

El problema es que se ejecuta tu SCRIPT antes de que se carguen las imágenes, con lo que el HEIGHT se calculará como cero.
Tendrás que hacer una función que compruebe si las imágenes se han cargado, antes de ejecutar la función que las centre.

Marti1982 · #3 (**permalink**) 03/03/2011, 06:25

Cita:

Iniciado por marlanga

El problema es que se ejecuta tu SCRIPT antes de que se carguen las imágenes, con lo que el HEIGHT se calculará como cero.
Tendrás que hacer una función que compruebe si las imágenes se han cargado, antes de ejecutar la función que las centre.

Muchas gracias marlanga, aunque todavia no se mucho sobre jquery, tenia entendido que la funcion "$(document).ready(function() {...});" hacía que hasta que no se cargará la página no ejecutara ningún script.

Alguna indicacion de como he de realizar la función que mencionas?

marlanga · #4 (**permalink**) 03/03/2011, 07:37

Aquí http://www.forosdelweb.com/f18/prelo...vo-php-877677/ le puse un precargador de imágenes que encontré y simplifiqué para mi uso. Adáptalo a tu código.

Marti1982 · #5 (**permalink**) 03/03/2011, 09:04

Cita:

Iniciado por marlanga

Aquí http://www.forosdelweb.com/f18/prelo...vo-php-877677/ le puse un precargador de imágenes que encontré y simplifiqué para mi uso. Adáptalo a tu código.

Gracias de nuevo marlanga, esta noche lo pruebo y digo a ver como me ha ido el tema. Un saludo.

Marti1982 · #6 (**permalink**) 03/03/2011, 16:43

Ok, de momento he conseguido integrarlo al script de ejemplo que habia escrito al principio de este post.
Ahora espero hacer lo mismo con el script original, que es bastante más complejo. La principal duda que tengo es como puedo pasarle la matriz php que contiene la ruta de cada imagen al jquery, ya que dicha matriz se generará en un archivo php aparte y no se si se puede leer desde el archivo jquery, se agradece cualquier ayuda :)
Un saludo y gracias.

Marti1982 · #7 (**permalink**) 04/03/2011, 13:01

Ya he solucionado el problema con el original. Al final he encontrado la solución con $(window).load(... que me sirve para lo que quiero. El script resultante es este así:

var altura_div_padre = $(".img_div").css("height");
var altura_div_padre = altura_div_padre.slice(0, -2); // Alto del div "padre" que contiene la imagen

Código PHP:

  $(window).load(function(){ // Se espera a que se carguen las imagenes antes de ajustar la posicion 
    $(".img_thumb").each(function() { 
        // Altura de la imagen 
        var altura_img = $(this).attr("height"); 
         
        // Restamos altura del div "padre" y dividimos entre 2 redondeando a entero 
        var resto_altura = Math.round((altura_div_padre - altura_img) / 2); 
         
        // Centramos la imagen con el resultado 
        $(this).css("position" , "relative").css("top" , resto_altura); 
         
 
        $(this).css("visibility","visible"); 
    }); 
})

con $(window).load(... me ajuta las imagenes despues de cargarlas.
Saludos.