Buen, el tema es que tengo una web dónde se muestran unos productos, al picar sobre un producto se abre una lightbox con los datos del producto y unas imágenes del producto, todo esto está hecho con php y funciona correctamente, el problema es que hay una imagen principal y otras de vistas del producto, bien he guardado la foto principal en la tabla del producto y tengo otra tabla (fotosproducto) con las fotos secundarias, bien en el lightbox muestro la foto principal en grande y las secundarias en thumbs abajo, de modo que al pinchar en los thumbs las fotos secundarias pasan a la zona de la principal, esto está hecho con ajax y también funciona bien. El problema es que el cliente quiere que al picar el la foto principal esta se abra en un tamaño más grande, esto también está hecho, pero debería ser una galería, es decir que tenga una barra de navegación para ver las fotos secundarias desde esta nueva lightbox, esto también lo hago, pero me encuentro con dos problemas, uno es que la foto que está en ese momento como principal se ve 2 veces y el otro es que al seleccionar una foto secundaria la foto principal desaparece, os pongo el código por partes:
Código PHP:
// Muestro la foto principal de la tabla productos
echo '<p class="productoIMG"><a href="images/productos/'.$row_rsProd->archivo.'" class="lightbox2" rel="prods" id="imagen"><img src="images/productos/'.$row_rsProd->archivo.'" alt="'.$row_rsProd->nombre.'" /></a></p>';
// Muestro las fotos secundarias en una capa oculta para la galería (se seleccionan por rel)
echo '<div style="display:none;">';
foreach($row_rsFotos as $foto){
echo '<a href="images/productos/'.$foto->archivo.'?g=1" class="lightbox2" rel="prods" id="imagen"><img src="images/productos/'.$foto->archivo.'" /></a>';
}
echo '</div>';
Código PHP:
<div class="thumbs">
<?php
if($totalFotos){
?>
<ul>
<?php
foreach($row_rsFotos as $foto){
echo '<li><a href="verFoto.php?foto='.$foto->archivo.'" class="ajax"><img src="images/productos/thumbs/'.$foto->archivo.'" alt="'.$foto->archivo.'" width="75" title="Ver '.$foto->archivo.'" /></a></li>';
}
?>
<!-- Esta es la foto de la tabla productos (foto principal) -->
<li><a href="verFoto.php?foto=<?php echo $row_rsProd->archivo; ?>" class="ajax"><img src="images/productos/thumbs/<?php echo $row_rsProd->archivo; ?>" alt="<?php echo $row_rsProd->archivo; ?>" width="75" title="Ver <?php echo $row_rsProd->archivo; ?>" /></a></li>
</ul>
<?php }else{ ?>
<p>No hay más fotos para este producto</p>
<?php } ?>
</div> Código PHP:
<a href="images/productos/<?php echo $_GET['foto']; ?>" class="lightbox2" rel="prods" id="imagen"><img src="images/productos/normal/<?php echo $_GET['foto']; ?>" width="238" alt="<?php echo $_GET['foto']; ?>" title="<?php echo $_GET['foto']; ?>" /></a> 
