Hola, os cuento... Estoy haciendo un thickbox, que espero será un futuro plugin, y por el momento estoy trabajando con las imágenes y el posicionamiento en el navegador. Está el código "todo para delante", aún sin optimizar, pero se entiende bien.
El caso es que al cargar una imagen, esta se posiciona correctamente, pero al volver a cargarla o cargar otra diferente se posiciona más abajo. Yo no veo el error, seguro que más ojos ayudan. Os dejo el código:
Código Javascript
:
Ver original$(document).ready(function () {
var body;
var x;
var y;
var img;
var w;
var h;
var maxImgW;
var maxImgH;
var nW;
var nH;
var nImgW;
var nImgH;
var sumaAncho;
var sumaAlto;
x = window.innerWidth;
y = window.innerHeight;
if ($('html').height() < y) { // ancho del fondo
$('#mithickboxStart').css('height', '100%');
}
else {
$('#mithickboxStart').css('height', $('html').height() + 'px');
}
$('.mithickbox img').click(function () { // obtiene ancho y alto de la imagen
img = new Image();
img.src = $(this).attr('src');
w = img.width;
h = img.height;
$('#mithickboxStart').fadeIn(1200, function () {
maxImgW = 800; // ancho y alto máximos de la imagen a mostrar
maxImgH = 600;
if (w >= maxImgW || h >= maxImgH) { // si es más grande se redimensiona la vista y la capa
nW = w * maxImgH / h;
nH = h * nW / w;
nImgW = nW;
nImgH = nH;
}
else {
nW = w; // ancho de la capa para imágenes más pequeñas. se puede utilizar '%' o números (por defecto w)
nH = h;
nImgW = w;
nImgH = h;
}
if (nW == w) {
sumaAncho = nW + 80;
}
else {
if (isNaN(nW) == true) { // comprueba el ancho. si hay % o si el tamaño de la capa es más pequeño que el de la imagen lo adapta a la capa
num = nW.lastIndexOf('%');
str = nW.substr(0, 2);
sumaAncho = str * x / 100;
if (sumaAncho < nW) {
sumaAncho = nW + 80;
}
}
else {
sumaAncho = nW + 80;
}
}
sumaAlto = document.getElementById('mithickboxImg').offsetHeight; // alto total de la capa
if ((nH + sumaAlto) >= y) {
alert('el alto total de la capa (' + parseFloat(nH + sumaAlto) + 'px) es superior al del cliente (' + y + 'px)'); // por solucionar
}
$('#mithickboxImg').css({
width: sumaAncho,
visibility: 'visible',
top: (y - nH - sumaAlto - 80) / 2,
left: (x - sumaAncho) / 2
}).show(function () {
$('<img width="' + nImgW + '" height="' + nImgH + '" src="' + img.src + '" alt="" />').insertBefore($('#mithickboxImg .inferior'));
$('#mithickboxStart').live('click',function () {
$('#mithickboxImg').fadeOut(500, function () {
$(this).css({'visibility':'hidden'});
$('#mithickboxStart').hide();
});
});
});
});
$('#mithickboxImg img').remove();
delete img;
});
});
La hoja de estilos:
Código CSS:
Ver original/* resets */
* { margin: 0; padding: 0; }
:focus , :active { outline: 0; }
ul { list-style: none; }
h1 , h2 , h3 , h4 , h5 , h6 , pre , code { font-size: 1em; font-weight: normal; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a img , :link img , :visited img { border: none; }
address { font-style: normal; }
/**********/
html, body { height: 100%; }
body
{
font: 14px Tahoma, sans-serif;
}
.wrap
{
width: 80%;
margin: 0 auto;
}
.mithickbox /* cómo se muestran las imágenes (sin thickbox) */
{
display: inline;
padding: 0 8px;
}
.mithickbox img
{
width: 50px;
height: 50px;
cursor: pointer;
}
#mithickboxStart /* fondo */
{
display: none;
position: fixed;
z-index: 99;
width: 100%;
background-color: #A9A9A9;
opacity: .8;
}
#mithickboxImg /* capa donde se carga la imagen */
{
z-index: 100;
position: fixed;
height: auto;
visibility: hidden;
text-align: center;
border-radius: 30px;
background-color: White;
}
#mithickboxImg .superior
{
padding: 12px 0 6px;
border-radius: 15px 15px 0 0;
text-align: center;
background-color: #CCC;
}
#mithickboxImg .medio , #mithickboxImg .inferior
{
height: auto;
padding: 16px;
text-align: left;
}
#mithickboxImg img
{
background-color: #666;
padding: 24px;
}
Y el html:
Código HTML:
Ver original<!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" > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="mithickbox.js"></script> <link rel="Stylesheet" type="text/css" href="style.css" />
<div id="mithickboxStart"></div> <div class="superior"><h1>superior / encabezado
</h1></div> <div class="inferior"><p>inferior
</p></div>
<img src="img/1.gif" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/7.jpg" alt="" /> <img src="img/8.jpg" alt="" />
<img alt="" src="img/5.jpg" />
Si utilizáis unas imágenes cualquiera podéis ver exactamente lo que ocurre.
Gracias por adelantado :)