Centrado Vertical...efecto lightbox

[hoberwilly]

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.

[hoberwilly]

Este el codigo lightbox.css

Código php:

#lightbox{  position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
 
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; } /*margen de la imagen*/
 
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
 
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
 
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
 
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }  
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }           
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      
 
#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.

[willyfc]

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

[hoberwilly]

Hola amigo willyfc, esto es lo que uso:

Código php:

<tr>
    <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>
    </tr>
 

para ampliar mis imagenes. Y como dije la imagen ampliada me muestra horizontalmente centrado PERO VERTICALMENTE me muestra en la parte superior???

Saludos,

[willyfc]

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

[hoberwilly]

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,

[willyfc]

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

[hoberwilly]

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:

<?php
session_start();
include("conec.php");
$link=conectarse();
$pagina = "";
if(isset($_GET['p'])){
    $pagina = $_GET['p'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titulo de mi pagina</title>
<style type='text/css'>
<!--
body{
    margin: 0px;
}
-->
</style>
</head>
<body>
<? include("top.php"); ?>
<table border="0" cellpadding="0" cellspacing="0" width="1000" align="center">
<tr>
 <td width="168" align="center" valign="top"><br><?php include("menuIzquierdo.php"); ?></td>
 <td width="10"></td>
 <td width="822" align="left" valign="top"><br>
 <?php
    if($pagina==1){
        include("catalogoElla.php");
    }elseif($pagina==2){
        include("catalogoEl.php");
    }elseif($pagina==3){
        include("catalogoNino.php");
    }elseif($pagina==4){
        include("catalogoOferta.php");
    }else{
        include("catalogoItem.php");
    }
 ?>
 </td>
</tr>
</table>
<br>
<hr shade>
<?php include("pie.php"); ?>
</body>
</html>
<?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...

[willyfc]

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.

[hoberwilly]

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,

[willyfc]

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

[hoberwilly]

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,

[willyfc]

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.

[hoberwilly]

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...

[hoberwilly]

Hola willyfc, espero este en lo correcto pero esto es lo k tuve en el primer include del index:

Código php:

<html>
<head>
<title>Top</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<table border="0" width="100%" height="124" align="center" cellspacing="0" bgcolor="#007DFB">
<tr>
    <td colspan="9" align="left" valign="bottom" height="75">&nbsp;&nbsp;<img src="img/dynamic5.gif"></td>
    <td colspan="2" width="62%" align="right" valign="top" class="rolex">
    <script>document.write(showdate(new Date()))</script>
    </td>
</tr>
</table>
</body>
</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:

<table border="0" width="100%" height="124" align="center" cellspacing="0" bgcolor="#007DFB">
<tr>
    <td colspan="9" align="left" valign="bottom" height="75">&nbsp;&nbsp;<img src="img/dynamic5.gif"></td>
    <td colspan="2" width="62%" align="right" valign="top" class="rolex">
    <script>document.write(showdate(new Date()))</script>
    </td>
</tr>
</table>
 

Estoy por buen camino, a esto te referiste k modificara mi codigo...gracias por la ayuda de antemnao.

[willyfc]

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:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de includes</title>
<script type="text/javascript" src="lightbox.js"></script><!--u otros scripts-->
<style type="text/css">
.estilo1{......}
.estilo2{......}
.estilo3{......}
</style>
</head>
 
<body>
<table>
    <tr>
        <td class="estilo1"><?php include("hoja1.php"); ?></td>
        <td></td>
    </tr>
    <tr>
        <td class="estilo2"><?php include("hoja2.php"); ?></td>
        <td></td>
    </tr>
    <tr>
        <td class="estilo3"><?php include("hoja3.php"); ?></td>
        <td></td>
    </tr>
</table>
</body>
</html>
 

y las hojas de los includes.

Código html:

<table>
    <tr>
        <td class="estilo1">Lo que quieras</td>
        <td></td>
    </tr>
</table>
 

no debes repetir las cabeceras, ni estilos ni scripts que estes utilizando, así es como se trabajan

[hoberwilly]

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

[willyfc]

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

[hoberwilly]

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,

[willyfc]

prueba quitando esto del css del lb

Código:

#lightbox img{ width: auto; height: auto;}

[hoberwilly]

Hola amigo,
Este el codigo lb.css:

Código php:

#lightbox{  
    position: absolute; 
    left: 0; 
    width: 100%; 
    z-index: 100; 
    text-align: center; 
    line-height: 0;
}
#lightbox img{ 
    width: auto; 
    height: auto;
}
#lightbox a img{ 
    border: none; 
}
 
#outerImageContainer{ 
    position: relative; 
    background-color: #fff; 
    width: 250px; 
    height: 250px; 
    margin: 0 auto; 
}
#imageContainer{ 
    padding: 10px; 
} /*margen de la imagen*/
 
#loading{ 
    position: absolute; 
    top: 40%; 
    left: 0%; 
    height: 25%; 
    width: 100%; 
    text-align: center; 
    line-height: 0; 
}
#hoverNav{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 10; 
}
#imageContainer>#hoverNav{ 
    left: 0;
}
#hoverNav a{ 
    outline: none;
}
 
#prevLink, #nextLink{ 
    width: 49%; 
    height: 100%; 
    background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ 
    display: block; 
}
#prevLink { 
    left: 0; 
    float: left;
}
#nextLink { 
    right: 0; 
    float: right;
}
#prevLink:hover, #prevLink:visited:hover { 
    background: url(../images/prevlabel.gif) left 15% no-repeat; 
}
#nextLink:hover, #nextLink:visited:hover { 
    background: url(../images/nextlabel.gif) right 15% no-repeat; 
}
 
#imageDataContainer{ 
    font: 10px Verdana, Helvetica, sans-serif; 
    background-color: #fff; 
    margin: 0 auto; 
    line-height: 1.4em; 
    overflow: auto; 
    width: 100% ; 
}
 
#imageData{ 
    padding:0 10px; 
    color: #666; 
}
#imageData #imageDetails{ 
    width: 70%; 
    float: left; 
    text-align: left; 
}   
#imageData #caption{ 
    font-weight: bold;  
}
#imageData #numberDisplay{ 
    display: block; 
    clear: left; 
    padding-bottom: 1.0em;  
}           
#imageData #bottomNavClose{ 
    width: 66px; 
    float: right;  
    padding-bottom: 0.7em; 
    outline: none;
}       
 
#overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 90; 
    width: 100%; 
    height: 500px; 
    background-color: #000; 
}
 

Y segun lo sugerido elimine las lineas del 9 al 12:

Código php:

#lightbox img{ 
    width: auto; 
    height: auto;
}
 

Pareciera como que toda la imagen no encajara en el cuadro lb¿¿¿???

Saludos,

[hoberwilly]

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

Saludos,

[hoberwilly]

Hola amigos, este es mi index:

Código php:

<?php
session_start();
include("conec.php");
$link=conectarse();
$pagina = "";
if(isset($_GET['p'])){
    $pagina = $_GET['p'];
}
?>
<!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" dir="ltr" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="tienda virtual de calzado damas caballeros niños niñas" />
<meta name="description" content="Tienda Virtual de Venta de Calzados" />
<title>:: Tiendas Nando :: Tienda Virtual de Venta de Calzados</title>
<link href="css/catalogo.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script src="js/catalogo.js" type="text/javascript"></script>
</head>
<body>
<?php include("top.php"); ?>
<table>
<tr>
 <td><?php include("menuIzquierdo.php"); ?></td>
 <td></td>
 <td>
 <?php
    if($pagina==1){
        include("pagina1.php");
    }elseif($pagina==2){
        include("pagina2.php");
    }else{
        include("#.php");
    }
 ?>
 </td>
</tr>
</table>
<br>
<hr shade>
<?php include("pie.php"); ?>
</body>
</html>
<?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:

<?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:

<?php 
if(isset($_GET['cod']))
{ 
  include('conec.php');
  $link=conectarse();
  $sql = "SELECT foto FROM tabla WHERE id='".$_GET['cod']."'"; 
  $consulta = mysql_query($sql,$link); 
  $imagen = mysql_result($consulta,0,"foto"); 
  Header ("Content-type: image/jpeg"); 
  $img = imagecreatefromstring($imagen); 
  $picsize = 500; 
  $new_w = imagesx($img); 
  $new_h = imagesy($img); 
  $aspect_ratio = $new_h / $new_w; 
  $new_w = $picsize; 
  $new_h = abs($new_w * $aspect_ratio); 
  $dst_img = ImageCreateTrueColor($new_w,$new_h);
  imagecopyresampled($dst_img,$img,0,0,0,0,$new_w,$new_h,imagesx($img),imagesy($img)); 
  imagejpeg($dst_img,'',100);
  imagedestroy($imagen);
} 
?>
 

Este es el css lb:

Código php:

#lightbox{  
    position: absolute; 
    left: 0; 
    width: 100%; 
    z-index: 100; 
    text-align: center; 
    line-height: 0;
}
#lightbox img{ 
    width: auto; 
    height: auto;
}
#lightbox a img{ 
    border: none; 
}
 
#outerImageContainer{ 
    position: relative; 
    background-color: #fff; 
    width: 250px; 
    height: 250px; 
    margin: 0 auto; 
}
#imageContainer{ 
    padding: 10px; 
} /*margen de la imagen*/
 
#loading{ 
    position: absolute; 
    top: 40%; 
    left: 0%; 
    height: 25%; 
    width: 100%; 
    text-align: center; 
    line-height: 0; 
}
#hoverNav{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 10; 
}
#imageContainer>#hoverNav{ 
    left: 0;
}
#hoverNav a{ 
    outline: none;
}
 
#prevLink, #nextLink{ 
    width: 49%; 
    height: 100%; 
    background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ 
    display: block; 
}
#prevLink { 
    left: 0; 
    float: left;
}
#nextLink { 
    right: 0; 
    float: right;
}
#prevLink:hover, #prevLink:visited:hover { 
    background: url(../images/prevlabel.gif) left 15% no-repeat; 
}
#nextLink:hover, #nextLink:visited:hover { 
    background: url(../images/nextlabel.gif) right 15% no-repeat; 
}
 
#imageDataContainer{ 
    font: 10px Verdana, Helvetica, sans-serif; 
    background-color: #fff; 
    margin: 0 auto; 
    line-height: 1.4em; 
    overflow: auto; 
    width: 100% ; 
}
 
#imageData{ 
    padding:0 10px; 
    color: #666; 
}
#imageData #imageDetails{ 
    width: 70%; 
    float: left; 
    text-align: left; 
}   
#imageData #caption{ 
    font-weight: bold;  
}
#imageData #numberDisplay{ 
    display: block; 
    clear: left; 
    padding-bottom: 1.0em;  
}           
#imageData #bottomNavClose{ 
    width: 66px; 
    float: right;  
    padding-bottom: 0.7em; 
    outline: none;
}       
 
#overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 90; 
    width: 100%; 
    height: 500px; 
    background-color: #000; 
}
 

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,

[hoberwilly]

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.

[hoberwilly]

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:

#imageDataContainer{ 
    font: 11px Arial;        ///fuente arial
    background-color: #fff; 
    margin: 0 auto; 
    line-height: 1.4em; 
    overflow: hidden;          ///modificado a hidden
    width: 100% ; 
}
#imageData #bottomNavClose{ 
    width: 66px; 
    float: right;  
    padding-bottom: 0.7em;
    padding-right: 1.6em;                ////añadido el padding right
    outline: none;
}
 

Y a modificar segun las necesidades...gracias a todos. Bye