Galeria de fotos con lightbox

[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;
}