Foros del Web » Programando para Internet » Jquery »

[jQuery] Capa modal aparece más abajo al segundo click

 Estas en el tema de [jQuery] Capa modal aparece más abajo al segundo click en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/02/2012, 15:16
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años, 7 meses
Puntos: 37
[jQuery] Capa modal aparece más abajo al segundo click
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
  1. $(document).ready(function () {
  2.  
  3.     var body;
  4.     var x;
  5.     var y;
  6.     var img;
  7.     var w;
  8.     var h;
  9.     var maxImgW;
  10.     var maxImgH;
  11.     var nW;
  12.     var nH;
  13.     var nImgW;
  14.     var nImgH;
  15.     var sumaAncho;
  16.     var sumaAlto;
  17.  
  18.     x = window.innerWidth;
  19.     y = window.innerHeight;
  20.  
  21.     if ($('html').height() < y) {       // ancho del fondo
  22.  
  23.         $('#mithickboxStart').css('height', '100%');
  24.  
  25.     }
  26.     else {
  27.  
  28.         $('#mithickboxStart').css('height', $('html').height() + 'px');
  29.  
  30.     }
  31.  
  32.     $('.mithickbox img').click(function () {        // obtiene ancho y alto de la imagen
  33.  
  34.         img = new Image();
  35.         img.src = $(this).attr('src');
  36.  
  37.         w = img.width;
  38.         h = img.height;
  39.  
  40.         $('#mithickboxStart').fadeIn(1200, function () {
  41.  
  42.             maxImgW = 800;      // ancho y alto máximos de la imagen a mostrar
  43.             maxImgH = 600;
  44.  
  45.             if (w >= maxImgW || h >= maxImgH) {     // si es más grande se redimensiona la vista y la capa
  46.  
  47.                 nW = w * maxImgH / h;
  48.                 nH = h * nW / w;
  49.  
  50.                 nImgW = nW;
  51.                 nImgH = nH;
  52.  
  53.             }
  54.             else {
  55.  
  56.                 nW = w;         // ancho de la capa para imágenes más pequeñas. se puede utilizar '%' o números (por defecto w)
  57.                 nH = h;
  58.  
  59.                 nImgW = w;
  60.                 nImgH = h;
  61.  
  62.             }
  63.  
  64.             if (nW == w) {
  65.  
  66.                 sumaAncho = nW + 80;
  67.  
  68.             }
  69.             else {
  70.  
  71.                 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
  72.  
  73.                     num = nW.lastIndexOf('%');
  74.  
  75.                     str = nW.substr(0, 2);
  76.  
  77.                     sumaAncho = str * x / 100;
  78.  
  79.                     if (sumaAncho < nW) {
  80.  
  81.                         sumaAncho = nW + 80;
  82.  
  83.                     }
  84.  
  85.                 }
  86.                 else {
  87.  
  88.                     sumaAncho = nW + 80;
  89.  
  90.                 }
  91.  
  92.             }
  93.  
  94.             sumaAlto = document.getElementById('mithickboxImg').offsetHeight;       // alto total de la capa
  95.  
  96.             if ((nH + sumaAlto) >= y) {
  97.  
  98.                 alert('el alto total de la capa (' + parseFloat(nH + sumaAlto) + 'px) es superior al del cliente (' + y + 'px)');         // por solucionar
  99.  
  100.             }
  101.  
  102.             $('#mithickboxImg').css({
  103.  
  104.                 width: sumaAncho,
  105.                 visibility: 'visible',
  106.                 top: (y - nH - sumaAlto - 80) / 2,
  107.                 left: (x - sumaAncho) / 2
  108.  
  109.             }).show(function () {
  110.  
  111.                 $('<img width="' + nImgW + '" height="' + nImgH + '" src="' + img.src + '" alt="" />').insertBefore($('#mithickboxImg .inferior'));
  112.  
  113.                 $('#mithickboxStart').live('click',function () {
  114.  
  115.                     $('#mithickboxImg').fadeOut(500, function () {
  116.  
  117.                         $(this).css({'visibility':'hidden'});
  118.                         $('#mithickboxStart').hide();
  119.  
  120.                     });
  121.  
  122.                 });
  123.  
  124.             });
  125.  
  126.         });
  127.  
  128.         $('#mithickboxImg img').remove();
  129.         delete img;
  130.  
  131.     });
  132.  
  133. });

La hoja de estilos:

Código CSS: 
Ver original
  1. /* resets */
  2. * {    margin: 0; padding: 0; }
  3. :focus , :active { outline: 0; }
  4. ul { list-style: none; }
  5. h1 , h2 , h3 , h4 , h5 , h6 , pre , code { font-size: 1em; font-weight: normal; }
  6. a { color: inherit; text-decoration: none; cursor: pointer; }
  7. a img , :link img , :visited img { border: none; }
  8. address { font-style: normal; }
  9. /**********/
  10.  
  11. html, body { height: 100%; }
  12.  
  13. body
  14. {
  15.     font: 14px Tahoma, sans-serif;
  16. }
  17.  
  18. .wrap
  19. {
  20.     width: 80%;
  21.     margin: 0 auto;
  22. }
  23.  
  24. .mithickbox /* cómo se muestran las imágenes (sin thickbox) */
  25. {
  26.     display: inline;
  27.     padding: 0 8px;
  28. }
  29.  
  30.     .mithickbox img
  31.     {
  32.         width: 50px;
  33.         height: 50px;
  34.         cursor: pointer;
  35.     }
  36.     
  37. #mithickboxStart /* fondo */
  38. {
  39.     display: none;
  40.     position: fixed;
  41.     z-index: 99;
  42.     width: 100%;
  43.     background-color: #A9A9A9;
  44.     opacity: .8;
  45. }
  46.  
  47. #mithickboxImg /* capa donde se carga la imagen */
  48. {
  49.     z-index: 100;
  50.     position: fixed;
  51.     height: auto;
  52.     visibility: hidden;
  53.     text-align: center;
  54.     border-radius: 30px;
  55.     background-color: White;
  56. }
  57.  
  58.     #mithickboxImg .superior    
  59.     {
  60.         padding: 12px 0 6px;
  61.         border-radius: 15px 15px 0 0;
  62.         text-align: center;
  63.         background-color: #CCC;
  64.     }
  65.         
  66.         #mithickboxImg .medio , #mithickboxImg .inferior
  67.         {
  68.             height: auto;
  69.             padding: 16px;
  70.             text-align: left;
  71.         }
  72.     
  73.     #mithickboxImg img
  74.     {
  75.         background-color: #666;
  76.         padding: 24px;
  77.     }

Y el html:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>Untitled Page</title>
  5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6.     <script type="text/javascript" src="mithickbox.js"></script>
  7.     <link rel="Stylesheet" type="text/css" href="style.css" />
  8. </head>
  9. <body>
  10.  
  11.     <div id="mithickboxStart"></div>
  12.     <div id="mithickboxImg">
  13.         <div class="superior"><h1>superior / encabezado</h1></div>
  14.         <div class="medio"><p>medio</p></div>
  15.         <div class="inferior"><p>inferior</p></div>
  16.     </div>
  17.  
  18.     <div class="wrap">
  19.     
  20.         <div class="mithickbox">
  21.         
  22.             <img src="img/1.gif" alt="" />
  23.             <img src="img/2.jpg" alt="" />
  24.             <img src="img/3.jpg" alt="" />
  25.             <img src="img/4.jpg" alt="" />
  26.             <img src="img/7.jpg" alt="" />            
  27.             <img src="img/8.jpg" alt="" />
  28.  
  29.         </div>
  30.  
  31.         <div class="mithickbox">
  32.             <img alt="" src="img/5.jpg" />
  33.         </div>
  34.     
  35.     </div>
  36.         
  37. </body>
  38. </html>

Si utilizáis unas imágenes cualquiera podéis ver exactamente lo que ocurre.
Gracias por adelantado :)
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
Última edición por KoswiDigital; 08/02/2012 a las 15:47

Etiquetas: abajo, html, modal, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:30.