lightbox creador por mi

morfasto · #1 (**permalink**) 20/10/2011, 14:37

Hola, que tal?

Estuve investigando y nunca encontre la manera de hacer para que a la hora de abrir un html en el lightbox, este lightbox se ajustara a la altura del html. Entonces decidi hacerlo yo mismo.

Hasta ahora me esta saliendo todo bien, pero aun tengo un par de dudas.

1. Cuando uno abre un lightbox, este crea un fondo para tapar la informacion de la pagina y que resalte el lightbox. En mi caso, se crea un fondo negro con opacidad, para que no se tape por completo la informacion de la pagina. Mi duda esta que a la hora de que se crea, la altura que tiene no es del tamaño del lightbox, sino del tamaño de la ventana. No se como hacer para que sea 5px mas alto que el lightbox.

Mi lightbox se acomoda al tamaño del html que se abre, a veces es mas pequeño que la ventana, a veces es mas grande, dependiendo de la informacion que se cargue dentro de el.

2. Necesito hacer que cuando se abra el lightbox, se cree un scrollbar solo para el lightbox, para que cuando scrollee, solo se mueva el lightbox y no el lightbox junto con la informacion de la pagina (que esta tapada por el lightbox)

Nose si alguien pueda ayudarme con esto, de todas maneras, muchas gracias!

morfasto · #2 (**permalink**) 20/10/2011, 14:58

Olvide poner mi codigo:

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Lightbox</title>
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters, funcion) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = funcion;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }
 
   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('content').innerHTML = result;            
         } else {
            alert(http_request.status);
         }
      }
   }
   function get() {
      var poststr = "mes";
      makePOSTRequest('fotos.php', poststr, alertContents);
   }
 
function showLightbox() {
    document.getElementById('over').style.display='inline';
    document.getElementById('fade').style.display='block';
}
function hideLightbox() {
    document.getElementById('over').style.display='none';
    document.getElementById('fade').style.display='none';
}
</script>
<style type="text/css">
body {
    background-color: #FFFFFF;
    font-family: "Trebuchet MS", Tahoma, Verdana;
    font-size: 12px;
    font-weight: normal;
    color: #666666;
    margin: 10px;
    padding: 0;
}
.fadebox {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height:100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.overbox {
    display: none;
    position: absolute;
    top: 0%;
    left: 25%;
    width: auto;
    z-index:1002;
}
#content {
    background: #FFFFFF;
    border: solid 3px #CCCCCC;
    height:auto;
 
}
 
</style>
</head>
<body>
<p><a href="javascript:showLightbox();get();">Show LightBox</a></p>
<div id="over" class="overbox">
    <div id="content">
    </div>
</div>
<a href="javascript:hideLightbox();"<div id="fade" class="fadebox">&nbsp;</div></a>
</body>
</html>

La informacion del lightbox se carga con AJAX cuando se aprieba el link Show Lightbox

morfasto · #3 (**permalink**) 20/10/2011, 16:20

El punto 1 ya lo resolvi, cambiando la posicion del .fadebox por fixed:

Código CSS:

Ver original.fadebox {
* * display: none;
* * position: fixed;
* * top: 0%;
* * left: 0%;
* * width: 100%;
* * height:100%;
* * background-color: black;
* * z-index:1001;
* * -moz-opacity: 0.8;
* * opacity:.80;
* * filter: alpha(opacity=80);
}

Pero el punto 2 todavia no logro resolverlo, alguna idea?

Batan · #4 (**permalink**) 20/10/2011, 23:16

Buenas.
Al contenedor .overbox, prueba a darle overflow: scroll;

Saludos

morfasto · #5 (**permalink**) 20/10/2011, 23:30

Eso seria para ponerle un scroll al contenedor y escrolear la informacion dentro del div. Lo que yo necesito es escrolear el DIV en si. No quiero que la informacion dentro del div se mueva con el scroll, sino el DIV en si. Algo asi como cuando uno abre un iframe en facebook al ver una foto. Este div en el que sale la foto y sus comentarios no tiene un scroll, sino el scroll esta afuera y mueve a todo el div. Eso es lo que quiero.

Se entiende lo que explico?

Gracias!

morfasto · #6 (**permalink**) 21/10/2011, 10:59

Alguien tiene alguna idea de como resolver esto?

Gracias!

morfasto · #7 (**permalink**) 21/10/2011, 11:04

Otra pregunta, porque no funciona en IE8?