Tema: lightbox creador por mi
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 20/10/2011, 14:58
Avatar de morfasto
morfasto
 
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 12 años, 9 meses
Puntos: 8
Respuesta: lightbox creador por mi
Olvide poner mi codigo:

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>CSS Lightbox</title>
  5. <script type="text/javascript" language="javascript">
  6.    var http_request = false;
  7.    function makePOSTRequest(url, parameters, funcion) {
  8.       http_request = false;
  9.       if (window.XMLHttpRequest) { // Mozilla, Safari,...
  10.          http_request = new XMLHttpRequest();
  11.          if (http_request.overrideMimeType) {
  12.             // set type accordingly to anticipated content type
  13.             //http_request.overrideMimeType('text/xml');
  14.             http_request.overrideMimeType('text/html');
  15.          }
  16.       } else if (window.ActiveXObject) { // IE
  17.          try {
  18.             http_request = new ActiveXObject("Msxml2.XMLHTTP");
  19.          } catch (e) {
  20.             try {
  21.                http_request = new ActiveXObject("Microsoft.XMLHTTP");
  22.             } catch (e) {}
  23.          }
  24.       }
  25.       if (!http_request) {
  26.          alert('Cannot create XMLHTTP instance');
  27.          return false;
  28.       }
  29.       
  30.       http_request.onreadystatechange = funcion;
  31.       http_request.open('POST', url, true);
  32.       http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  33.       http_request.setRequestHeader("Content-length", parameters.length);
  34.       http_request.setRequestHeader("Connection", "close");
  35.       http_request.send(parameters);
  36.    }
  37.  
  38.    function alertContents() {
  39.       if (http_request.readyState == 4) {
  40.          if (http_request.status == 200) {
  41.             //alert(http_request.responseText);
  42.             result = http_request.responseText;
  43.             document.getElementById('content').innerHTML = result;            
  44.          } else {
  45.             alert(http_request.status);
  46.          }
  47.       }
  48.    }
  49.    function get() {
  50.       var poststr = "mes";
  51.       makePOSTRequest('fotos.php', poststr, alertContents);
  52.    }
  53.  
  54. function showLightbox() {
  55.     document.getElementById('over').style.display='inline';
  56.     document.getElementById('fade').style.display='block';
  57. }
  58. function hideLightbox() {
  59.     document.getElementById('over').style.display='none';
  60.     document.getElementById('fade').style.display='none';
  61. }
  62. </script>
  63. <style type="text/css">
  64. body {
  65.     background-color: #FFFFFF;
  66.     font-family: "Trebuchet MS", Tahoma, Verdana;
  67.     font-size: 12px;
  68.     font-weight: normal;
  69.     color: #666666;
  70.     margin: 10px;
  71.     padding: 0;
  72. }
  73. .fadebox {
  74.     display: none;
  75.     position: absolute;
  76.     top: 0%;
  77.     left: 0%;
  78.     width: 100%;
  79.     height:100%;
  80.     background-color: black;
  81.     z-index:1001;
  82.     -moz-opacity: 0.8;
  83.     opacity:.80;
  84.     filter: alpha(opacity=80);
  85. }
  86. .overbox {
  87.     display: none;
  88.     position: absolute;
  89.     top: 0%;
  90.     left: 25%;
  91.     width: auto;
  92.     z-index:1002;
  93. }
  94. #content {
  95.     background: #FFFFFF;
  96.     border: solid 3px #CCCCCC;
  97.     height:auto;
  98.  
  99. }
  100.  
  101. </style>
  102. </head>
  103. <body>
  104. <p><a href="javascript:showLightbox();get();">Show LightBox</a></p>
  105. <div id="over" class="overbox">
  106.     <div id="content">
  107.     </div>
  108. </div>
  109. <a href="javascript:hideLightbox();"<div id="fade" class="fadebox">&nbsp;</div></a>
  110. </body>
  111. </html>

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