Foros del Web » Creando para Internet » CSS »

Centrado Vertical...efecto lightbox

Estas en el tema de Centrado Vertical...efecto lightbox en el foro de CSS en Foros del Web. Hola a todos amigos, Quisiera me puedan ayudar con esto, el tema esta en que yo uso el efecto lightbox en mi pagina web pero ...
  #1 (permalink)  
Antiguo 11/04/2009, 11:37
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Centrado Vertical...efecto lightbox

Hola a todos amigos,
Quisiera me puedan ayudar con esto, el tema esta en que yo uso el efecto lightbox en mi pagina web pero lo que no consigo es como modificarlo el codigo css para que me CENTRE VERTICALMENTE la imagen.

Este es link de lightbox: (tresw)(punto)huddletogether(punto)com/projects/lightbox2/
con la k actualmente estoy trabajando.

Muchas gracias por la ayuda brindada.
  #2 (permalink)  
Antiguo 13/04/2009, 10:32
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Este el codigo lightbox.css
Código php:
Ver original
  1. #lightbox{  position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
  2. #lightbox img{ width: auto; height: auto;}
  3. #lightbox a img{ border: none; }
  4.  
  5. #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
  6. #imageContainer{ padding: 10px; } /*margen de la imagen*/
  7.  
  8. #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
  9. #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
  10. #imageContainer>#hoverNav{ left: 0;}
  11. #hoverNav a{ outline: none;}
  12.  
  13. #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
  14. #prevLink { left: 0; float: left;}
  15. #nextLink { right: 0; float: right;}
  16. #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
  17. #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
  18.  
  19. #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
  20.  
  21. #imageData{ padding:0 10px; color: #666; }
  22. #imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
  23. #imageData #caption{ font-weight: bold; }
  24. #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }          
  25. #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}     
  26.  
  27. #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Donde es necesario modificarlo para que este centrado verticalmente...muchas gracias.
  #3 (permalink)  
Antiguo 13/04/2009, 10:43
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

pero yo la veo bien centrada, o cual es el problema, que cuando haces scroll la imagen se mueve junto con el?,no entiendo bien, por que en la web que muestras si esta centrado como tu dices
__________________
WFC
codigo82
  #4 (permalink)  
Antiguo 13/04/2009, 11:07
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola amigo willyfc, esto es lo que uso:
Código php:
Ver original
  1. <tr>
  2.     <td align="center" valign="middle"><?php echo "<a href=\"verLightbox.php?cod=".$row['id']."\" rel=\"lightbox\"><img src=\"img/ampliar.gif\" width=\"18\" height=\"18\" alt=\"Ampliar Imagen\"></a>"; ?></td>
  3.     </tr>
para ampliar mis imagenes. Y como dije la imagen ampliada me muestra horizontalmente centrado PERO VERTICALMENTE me muestra en la parte superior???

Saludos,
  #5 (permalink)  
Antiguo 13/04/2009, 11:43
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

mmm, creo que no entiendo bien(sorry estoy algo lento hoy), podrías colocar un vínculo para ver como sale tal vez ni sea necesario que tenga el php
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 13/04/2009, 11:53
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Bien amigo, mi pagina es (treswpunto)tiendasnando(punto)com
dar click en ampliar imagen de cualquier producto (en la pagina principal), alli veras k el efecto lightbox se visualiza en la parte superior (vertical)

Saludos,
  #7 (permalink)  
Antiguo 13/04/2009, 13:50
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

Tienes problemas muy serios en tu web, como la estás haciendo?, con includes de php?.

1º .- No tienes un dtd definido, así que muchas de las cosas que pongas no funcionarán bien.
2º .- te fijaste que tienes 2 páginas en una?, donde comienza el body comienza otro html.

Corrige estas cosas primero, tal vez con un dtd correcto se corrija, por que el lb lo veo funcionando como funciona en la web de donde lo descargaste.

una cosa más al parecer la tabla te esta haciendo una mala pasada, en ff se abre el scroll horizontal
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 14/04/2009, 14:07
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola amigo, al respecto te comento que en su debido momento realize mi consulta y las sugerencias iban a modificar mi index (frames). link:http://www.forosdelweb.com/f4/consul...-frame-674216/
Asi que no viene al tema pero quizas sea de utilidad para que me puedas iluminar algunas cosas que estan aun en vacio...dejo el codigo index
Código php:
Ver original
  1. <?php
  2. include("conec.php");
  3. $link=conectarse();
  4. $pagina = "";
  5. if(isset($_GET['p'])){
  6.     $pagina = $_GET['p'];
  7. }
  8. ?>
  9. <html>
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  12. <title>Titulo de mi pagina</title>
  13. <style type='text/css'>
  14. <!--
  15. body{
  16.     margin: 0px;
  17. }
  18. -->
  19. </style>
  20. </head>
  21. <body>
  22. <? include("top.php"); ?>
  23. <table border="0" cellpadding="0" cellspacing="0" width="1000" align="center">
  24. <tr>
  25.  <td width="168" align="center" valign="top"><br><?php include("menuIzquierdo.php"); ?></td>
  26.  <td width="10"></td>
  27.  <td width="822" align="left" valign="top"><br>
  28.  <?php
  29.     if($pagina==1){
  30.         include("catalogoElla.php");
  31.     }elseif($pagina==2){
  32.         include("catalogoEl.php");
  33.     }elseif($pagina==3){
  34.         include("catalogoNino.php");
  35.     }elseif($pagina==4){
  36.         include("catalogoOferta.php");
  37.     }else{
  38.         include("catalogoItem.php");
  39.     }
  40.  ?>
  41.  </td>
  42. </tr>
  43. </table>
  44. <br>
  45. <hr shade>
  46. <?php include("pie.php"); ?>
  47. </body>
  48. </html>
  49. <?php mysql_close($link); ?>
p.d. otra cosa disculpame mi ignorancia pero podrias decirme que significado tiene "dtd","lb"

y muchas gracias por tu ayuda...
  #9 (permalink)  
Antiguo 14/04/2009, 14:11
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

un dtd es lo que le dice al navegador que tipo de documento estas utilizando, si no tienes uno algunas de las cosas que declares de css o hmtl no funcionaran por que el navegador no sabrá que son, por ejemplo si colocas margin:0 auto para hacer un centrado no funcionará, coloca esto:

Código:
<!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>
y lb es lightbox, es que me dio flojera escribirlo y supuse que lo entenderías.
__________________
WFC
codigo82

Última edición por willyfc; 14/04/2009 a las 14:24
  #10 (permalink)  
Antiguo 15/04/2009, 14:50
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola amigo willyfc, realize las modificaciones del caso segun lo sugerido.
Probe:
1. Colocandolo en el index...sin resultados
2. Lo coloque en los includes individuales (en c/pagina php)...
pero igual este efecto lightbox me sigue saliendo en la parte superior (del vertical) de mi pagina.

Saludos,
  #11 (permalink)  
Antiguo 15/04/2009, 15:14
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

estuve viendo el lugar desde donde lo descargaste y no tiene ese problema y mi pregunta es: por que modificaste el css que viene por defecto?, la verdad no encuentro una razón.

Lo pregunto por que yo también he utilizado lb y no vi que haya necesidad de hacerlo
__________________
WFC
codigo82
  #12 (permalink)  
Antiguo 15/04/2009, 17:05
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Amigo pero para nada he modificado el css...+bien mi intencion esta modificarlo pero que raro si me dices k lo has utilizado y no te genera estos problemas.
Estoy probando lo del dtd, y he añadido al index pero me modifica algunas cosas, he añadido solo en el catalogo.php y alli si k me esta modificando algunas cosas como k esta colocandolo un scroll en el efecto???
Si puedes darle un vistazo a mi portal...te agradeceria mucho

Saludos,
  #13 (permalink)  
Antiguo 15/04/2009, 17:38
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

Bueno, acabo de ver tu web con más detenimiento, estas utilizando include?, y lo mas importante, haz visto el código fuente de tu web?.

respondeme esto antes de seguir por favor.
__________________
WFC
codigo82
  #14 (permalink)  
Antiguo 15/04/2009, 17:48
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola willyfc,
efectivamente estoy tratando de ver como es que se esta generando lo que en su momento me advertiste: (...te fijaste que tienes 2 páginas en una?, donde comienza el body comienza otro html...)
No entiendo, y mil disculpas por la ignorancia de mi parte...pero quisiera saber k esta pasando.

Gracias otra vez por tu tiempo...
  #15 (permalink)  
Antiguo 15/04/2009, 17:59
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola willyfc, espero este en lo correcto pero esto es lo k tuve en el primer include del index:
Código php:
Ver original
  1. <html>
  2. <head>
  3. <title>Top</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. </head>
  6.  
  7. <body>
  8. <table border="0" width="100%" height="124" align="center" cellspacing="0" bgcolor="#007DFB">
  9. <tr>
  10.     <td colspan="9" align="left" valign="bottom" height="75">&nbsp;&nbsp;<img src="img/dynamic5.gif"></td>
  11.     <td colspan="2" width="62%" align="right" valign="top" class="rolex">
  12.     <script>document.write(showdate(new Date()))</script>
  13.     </td>
  14. </tr>
  15. </table>
  16. </body>
  17. </html>

Pero por la advertencia k me diste(te fijaste que tienes 2 páginas en una?, donde comienza el body comienza otro html...), modifik quitandole el html,head,/head,body,/body,/html:
Código php:
Ver original
  1. <table border="0" width="100%" height="124" align="center" cellspacing="0" bgcolor="#007DFB">
  2. <tr>
  3.     <td colspan="9" align="left" valign="bottom" height="75">&nbsp;&nbsp;<img src="img/dynamic5.gif"></td>
  4.     <td colspan="2" width="62%" align="right" valign="top" class="rolex">
  5.     <script>document.write(showdate(new Date()))</script>
  6.     </td>
  7. </tr>
  8. </table>
Estoy por buen camino, a esto te referiste k modificara mi codigo...gracias por la ayuda de antemnao.
  #16 (permalink)  
Antiguo 15/04/2009, 18:09
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

efectivamente es a lo que me refería, cuando utilizas includes solo la hoja que los recibe tiene que tener el dtd, por ejemplo:

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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Ejemplo de includes</title>
  5. <script type="text/javascript" src="lightbox.js"></script><!--u otros scripts-->
  6. <style type="text/css">
  7. .estilo1{......}
  8. .estilo2{......}
  9. .estilo3{......}
  10. </head>
  11.  
  12.     <tr>
  13.         <td class="estilo1"><?php include("hoja1.php"); ?></td>
  14.         <td></td>
  15.     </tr>
  16.     <tr>
  17.         <td class="estilo2"><?php include("hoja2.php"); ?></td>
  18.         <td></td>
  19.     </tr>
  20.     <tr>
  21.         <td class="estilo3"><?php include("hoja3.php"); ?></td>
  22.         <td></td>
  23.     </tr>
  24. </body>
  25. </html>

y las hojas de los includes.

Código html:
Ver original
  1.     <tr>
  2.         <td class="estilo1">Lo que quieras</td>
  3.         <td></td>
  4.     </tr>

no debes repetir las cabeceras, ni estilos ni scripts que estes utilizando, así es como se trabajan
__________________
WFC
codigo82
  #17 (permalink)  
Antiguo 15/04/2009, 18:21
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Muchisimas gracias willyfc, no sabes cuanto les agradesco...no me arrepiento para nada seguir en este foro...personas como yo k recien iniciamos a programar y caemos en unos desabruptos encontramos aqui en estos foros una ayuda desinteresada de ustedes.

Saludos,

p.d. al tema convertire todo los codigos y adaptarlo a lo k se concluyo...y aviso como me fue con el problema del lightbox inicial...bye
  #18 (permalink)  
Antiguo 15/04/2009, 18:24
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

de nada hombre, siempre que se puede se ayuda, espero que con esas correciones funcione bien el lb, ya que como te digo hace un rato lo baje del mismo lugar que tu y no da ningun problema. pues que te vaya bien
__________________
WFC
codigo82
  #19 (permalink)  
Antiguo 15/04/2009, 18:47
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Listo willyfc, modifique los codigos de los includes (hojas de los includes)...
pero esta pasando algo curioso con el lb, me esta centrando verticalmente pero como k hay unos scroll (horizontal y vertical) k no me cuadran???

Saludos,
  #20 (permalink)  
Antiguo 15/04/2009, 19:19
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrado Vertical...efecto lightbox

prueba quitando esto del css del lb

Código:
#lightbox img{ width: auto; height: auto;}
__________________
WFC
codigo82
  #21 (permalink)  
Antiguo 16/04/2009, 09:21
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola amigo,
Este el codigo lb.css:
Código php:
Ver original
  1. #lightbox{ 
  2.     position: absolute;
  3.     left: 0;
  4.     width: 100&#37;;
  5.     z-index: 100;
  6.     text-align: center;
  7.     line-height: 0;
  8. }
  9. #lightbox img{
  10.     width: auto;
  11.     height: auto;
  12. }
  13. #lightbox a img{
  14.     border: none;
  15. }
  16.  
  17. #outerImageContainer{
  18.     position: relative;
  19.     background-color: #fff;
  20.     width: 250px;
  21.     height: 250px;
  22.     margin: 0 auto;
  23. }
  24. #imageContainer{
  25.     padding: 10px;
  26. } /*margen de la imagen*/
  27.  
  28. #loading{
  29.     position: absolute;
  30.     top: 40%;
  31.     left: 0%;
  32.     height: 25%;
  33.     width: 100%;
  34.     text-align: center;
  35.     line-height: 0;
  36. }
  37. #hoverNav{
  38.     position: absolute;
  39.     top: 0;
  40.     left: 0;
  41.     height: 100%;
  42.     width: 100%;
  43.     z-index: 10;
  44. }
  45. #imageContainer>#hoverNav{
  46.     left: 0;
  47. }
  48. #hoverNav a{
  49.     outline: none;
  50. }
  51.  
  52. #prevLink, #nextLink{
  53.     width: 49%;
  54.     height: 100%;
  55.     background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
  56.     display: block;
  57. }
  58. #prevLink {
  59.     left: 0;
  60.     float: left;
  61. }
  62. #nextLink {
  63.     right: 0;
  64.     float: right;
  65. }
  66. #prevLink:hover, #prevLink:visited:hover {
  67.     background: url(../images/prevlabel.gif) left 15% no-repeat;
  68. }
  69. #nextLink:hover, #nextLink:visited:hover {
  70.     background: url(../images/nextlabel.gif) right 15% no-repeat;
  71. }
  72.  
  73. #imageDataContainer{
  74.     font: 10px Verdana, Helvetica, sans-serif;
  75.     background-color: #fff;
  76.     margin: 0 auto;
  77.     line-height: 1.4em;
  78.     overflow: auto;
  79.     width: 100% ;
  80. }
  81.  
  82. #imageData{
  83.     padding:0 10px;
  84.     color: #666;
  85. }
  86. #imageData #imageDetails{
  87.     width: 70%;
  88.     float: left;
  89.     text-align: left;
  90. }  
  91. #imageData #caption{
  92.     font-weight: bold; 
  93. }
  94. #imageData #numberDisplay{
  95.     display: block;
  96.     clear: left;
  97.     padding-bottom: 1.0em; 
  98. }          
  99. #imageData #bottomNavClose{
  100.     width: 66px;
  101.     float: right;  
  102.     padding-bottom: 0.7em;
  103.     outline: none;
  104. }      
  105.  
  106. #overlay{
  107.     position: absolute;
  108.     top: 0;
  109.     left: 0;
  110.     z-index: 90;
  111.     width: 100%;
  112.     height: 500px;
  113.     background-color: #000;
  114. }
Y segun lo sugerido elimine las lineas del 9 al 12:
Código php:
Ver original
  1. #lightbox img{
  2.     width: auto;
  3.     height: auto;
  4. }
Pareciera como que toda la imagen no encajara en el cuadro lb¿¿¿???

Saludos,
  #22 (permalink)  
Antiguo 16/04/2009, 15:30
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

No entiendo porque me sale estos scroll en el lightbox, esto se genera para c/u de las imagenes¿¿¿???.

Saludos,
  #23 (permalink)  
Antiguo 16/04/2009, 16:40
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola amigos, este es mi index:
Código php:
Ver original
  1. <?php
  2. include("conec.php");
  3. $link=conectarse();
  4. $pagina = "";
  5. if(isset($_GET['p'])){
  6.     $pagina = $_GET['p'];
  7. }
  8. ?>
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
  11. <head>
  12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  13. <meta name="keywords" content="tienda virtual de calzado damas caballeros niños niñas" />
  14. <meta name="description" content="Tienda Virtual de Venta de Calzados" />
  15. <title>:: Tiendas Nando :: Tienda Virtual de Venta de Calzados</title>
  16. <link href="css/catalogo.css" rel="stylesheet" type="text/css">
  17. <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
  18. <script src="js/prototype.js" type="text/javascript"></script>
  19. <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
  20. <script src="js/lightbox.js" type="text/javascript"></script>
  21. <script src="js/catalogo.js" type="text/javascript"></script>
  22. </head>
  23. <body>
  24. <?php include("top.php"); ?>
  25. <table>
  26. <tr>
  27.  <td><?php include("menuIzquierdo.php"); ?></td>
  28.  <td></td>
  29.  <td>
  30.  <?php
  31.     if($pagina==1){
  32.         include("pagina1.php");
  33.     }elseif($pagina==2){
  34.         include("pagina2.php");
  35.     }else{
  36.         include("#.php");
  37.     }
  38.  ?>
  39.  </td>
  40. </tr>
  41. </table>
  42. <br>
  43. <hr shade>
  44. <?php include("pie.php"); ?>
  45. </body>
  46. </html>
  47. <?php mysql_close($link); ?>
Dentro de una hoja del include (ojo que ya esta solucionado los temas dtd, repeticiones, etc) llamo el lb:
Código php:
Ver original
  1. <?php echo "<a href=\"verLightbox.php?cod=".$row['id']."\" rel=\"lightbox\" title=\"".$desc."\">Ampliar Imagen</a>"; ?>
///ahh un dato el campo de la descripcion del producto es un textarea////
Este el codigo verLb.php
Código php:
Ver original
  1. <?php
  2. if(isset($_GET['cod']))
  3. {
  4.   include('conec.php');
  5.   $link=conectarse();
  6.   $sql = "SELECT foto FROM tabla WHERE id='".$_GET['cod']."'";
  7.   $consulta = mysql_query($sql,$link);
  8.   $imagen = mysql_result($consulta,0,"foto");
  9.   Header ("Content-type: image/jpeg");
  10.   $img = imagecreatefromstring($imagen);
  11.   $picsize = 500;
  12.   $new_w = imagesx($img);
  13.   $new_h = imagesy($img);
  14.   $aspect_ratio = $new_h / $new_w;
  15.   $new_w = $picsize;
  16.   $new_h = abs($new_w * $aspect_ratio);
  17.   $dst_img = ImageCreateTrueColor($new_w,$new_h);
  18.   imagecopyresampled($dst_img,$img,0,0,0,0,$new_w,$new_h,imagesx($img),imagesy($img));
  19.   imagejpeg($dst_img,'',100);
  20.   imagedestroy($imagen);
  21. }
  22. ?>
Este es el css lb:
Código php:
Ver original
  1. #lightbox{ 
  2.     position: absolute;
  3.     left: 0;
  4.     width: 100&#37;;
  5.     z-index: 100;
  6.     text-align: center;
  7.     line-height: 0;
  8. }
  9. #lightbox img{
  10.     width: auto;
  11.     height: auto;
  12. }
  13. #lightbox a img{
  14.     border: none;
  15. }
  16.  
  17. #outerImageContainer{
  18.     position: relative;
  19.     background-color: #fff;
  20.     width: 250px;
  21.     height: 250px;
  22.     margin: 0 auto;
  23. }
  24. #imageContainer{
  25.     padding: 10px;
  26. } /*margen de la imagen*/
  27.  
  28. #loading{
  29.     position: absolute;
  30.     top: 40%;
  31.     left: 0%;
  32.     height: 25%;
  33.     width: 100%;
  34.     text-align: center;
  35.     line-height: 0;
  36. }
  37. #hoverNav{
  38.     position: absolute;
  39.     top: 0;
  40.     left: 0;
  41.     height: 100%;
  42.     width: 100%;
  43.     z-index: 10;
  44. }
  45. #imageContainer>#hoverNav{
  46.     left: 0;
  47. }
  48. #hoverNav a{
  49.     outline: none;
  50. }
  51.  
  52. #prevLink, #nextLink{
  53.     width: 49%;
  54.     height: 100%;
  55.     background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
  56.     display: block;
  57. }
  58. #prevLink {
  59.     left: 0;
  60.     float: left;
  61. }
  62. #nextLink {
  63.     right: 0;
  64.     float: right;
  65. }
  66. #prevLink:hover, #prevLink:visited:hover {
  67.     background: url(../images/prevlabel.gif) left 15% no-repeat;
  68. }
  69. #nextLink:hover, #nextLink:visited:hover {
  70.     background: url(../images/nextlabel.gif) right 15% no-repeat;
  71. }
  72.  
  73. #imageDataContainer{
  74.     font: 10px Verdana, Helvetica, sans-serif;
  75.     background-color: #fff;
  76.     margin: 0 auto;
  77.     line-height: 1.4em;
  78.     overflow: auto;
  79.     width: 100% ;
  80. }
  81.  
  82. #imageData{
  83.     padding:0 10px;
  84.     color: #666;
  85. }
  86. #imageData #imageDetails{
  87.     width: 70%;
  88.     float: left;
  89.     text-align: left;
  90. }  
  91. #imageData #caption{
  92.     font-weight: bold; 
  93. }
  94. #imageData #numberDisplay{
  95.     display: block;
  96.     clear: left;
  97.     padding-bottom: 1.0em; 
  98. }          
  99. #imageData #bottomNavClose{
  100.     width: 66px;
  101.     float: right;  
  102.     padding-bottom: 0.7em;
  103.     outline: none;
  104. }      
  105.  
  106. #overlay{
  107.     position: absolute;
  108.     top: 0;
  109.     left: 0;
  110.     z-index: 90;
  111.     width: 100%;
  112.     height: 500px;
  113.     background-color: #000;
  114. }
Se probo con y sin las lineas del 9 al 12...y sigue con estos scroll en la parte inferior del EFECTO LIGHTBOX???
Que debo hacer???

Gracias de antemano,
  #24 (permalink)  
Antiguo 16/04/2009, 18:48
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Probe en eliminar todos los archivos de las carpetas js, css...e instale de nuevo el Lightbox2.4
Pero me sigue igual...con los benditos scroll

Ayuda por favor...gracias y mil disculpas por las molestias k puedo originar.
  #25 (permalink)  
Antiguo 17/04/2009, 11:28
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Solo para dar por concluido a las ultimas consultas, y gracias a este link http://www.forosdelweb.com/f13/poner...ollbar-300513/
y meter mano al lb.css se modifikron estas lineas:
Código php:
Ver original
  1. #imageDataContainer{
  2.     font: 11px Arial;        ///fuente arial
  3.     background-color: #fff;
  4.     margin: 0 auto;
  5.     line-height: 1.4em;
  6.     overflow: hidden;          ///modificado a hidden
  7.     width: 100&#37; ;
  8. }
  9. #imageData #bottomNavClose{
  10.     width: 66px;
  11.     float: right;  
  12.     padding-bottom: 0.7em;
  13.     padding-right: 1.6em;                ////añadido el padding right
  14.     outline: none;
  15. }
Y a modificar segun las necesidades...gracias a todos. Bye
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




La zona horaria es GMT -6. Ahora son las 09:19.