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í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.