Galeria de fotos con lightbox

[mruiz17]

Que tal estoy realizando una galería de fotos con lightbox ya me despliega las
fotos y realiza el efecto de agrandar las fotos y cerrarlas.

La página tiene una menú con sus diferentes opciones (home,contacto,etc) las
fotos están listadas en la parte inferior cuando alguien le hace click se agrandan
las imágenes y puedes darle siguiente para ver el resto de la galería, el problema
es que cuando se hacen grande las fotos se pone negra la pantalla hasta ahi está
bien pero el problema es que se ven las opciones del menú, se ven atrás de las
fotos ¿ cómo se le puede hacer para que cuando hagan click en las fotos y vean
la galería no se vean las opciones del menú que se oculten y que nada más
muestre las fotos ?

Es algo del css le he estado moviendo pero no encuentro el detalle del problema

Cualquier soporte que me puedan brindar se los agradeceré.

[Mariano_Floyd]

Sin ver código ni ejemplo no puedo hacer mas que adivinar, pero te diría que revises los z-index del lightbox y el menu (el z-index del lightbox debe ser mayor).

[mruiz17]

Muchas gracias Mariano_Floyd, por responder efectivamente estuve moviéndole al
z-index en este caso le cambié el valor por uno menor al que tenía y me quedó a la
perfección como yo lo quería se amplían las imágenes sin que se vea el menú del
fondo.

Sin embargo el despliegue de imágenes está de forma estática es decir manualmente
le tienes que especificar la ruta donde se encuentran las fotos en el directorio.


Despliegue estático de 2 renglones a manera de ejemplo:
<div id="wizards">
<table border="0" align="center" >
<ul>
<tr>
<td>
<li><a href="01m.jpg"><img src="01.jpg" width="150" height="100"/></a></li>
</td>
<td>
<li><a href="02m.jpg"><img src="02.jpg" width="150" height="100"/></a></li>
</td>
</tr>
</ul>
</table>
</div>

que tal si tengo más de 100 fotos sería poco práctico y más trabajo el hacerlo de esta manera he intentado hacerlo con BD (mysql) me despliega pero no realiza el efecto de agrandar las imágenes cuando le haces click a cada una de ellas se queda pensando.

Código:

<?php
include("conexion.php");
$sql=mysql_query("SELECT * FROM FOTOS");
$x=1;
while($res=mysql_fetch_array($sql))
{
?>
<div id="wizards">

<ul>
<li><a href="images/imagen1.jpg"><?php echo '<img src="'.$res["FOTO"].'" width="150" height="100">';?></a></li>
<?php

$x++;
if(!($x%5)){ //si al dividir $x entre 5 da cero
echo "<br/>";//colocar un salto de linea
}
}
?>
</ul>

</div>

observación: si lo pongo asi <a href="images/01.jpg"><?php echo '<img src="'.$res["FOTO"].'" width="150" height="100">';?></a></li> en esta primera parte me despliega las fotos pero el efecto de agrandar solo con la primera foto será porque en la primera parte está estático la imágen lightbox solo funciona cuando las pones estáticas y no dinámicas como el ejemplo de abajo ?

si lo pongo asi <a href="<?php echo '<img src="'.$res["FOTO"].'" >';?>"><?php echo '<img src="'.$res["FOTO"].'" width="150" height="100">';?></a></li>

donde digamos son 2 campos que jala de la bd me despliega las fotos pero el efecto de agrandar no funciona se queda pensando no se si en la parte amarilla se escribirá de alguna otra forma porque estático si funciona pero solo con la primera imágen qué falta o sobra cualquier soporte que sepas de algún caso similar te lo agradeceré.

style.css este es el archivo para id del div wizards

body, ul, li, img {
margin: 0; padding: 0; border: 0;
}

body {
/*background: #fff;*/
/*#545454 url(images/bg.png);*/
}

#wizards {

/*width: 500px; margin: 200px auto;*/
}

#wizards li {
list-style: none; float: left; margin: 3px;
/*list-style: none; float: left; margin: 15px;*/
}

#wizards a img {
border: 5px solid #aaa;
}
#wizards a:hover img {
border: 5px solid #75879d;
}

#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90; /* z-index: 90; */
width: 100%;
height: 500px;
}

#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 300; /* z-index: 100; */
text-align: center;
line-height: 0;
}

#lightbox-image {
width: 100%;
height: auto;
}

#jquery-lightbox a img { border: none; }

#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#lightbox-container-image { padding: 10px; }

#lightbox-loading {
position: absolute; /*position: absolute; */
top: 60%; /*top: 40%; */
left: 10%; /*left: 0%; */
height: 75%; /*height: 25%; */
width: 50%; /*width: 100%; */
text-align: center;
line-height: 0;
}

#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100; /* z-index: 10; */
}

#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}

#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}

#lightbox-nav-btnPrev {
left: 0;
float: left;
}

#lightbox-nav-btnNext {
right: 0;
float: right;
}

#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}

#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}

#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}

#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}

#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}