Hola a todos.
Me ha surgido un problemilla a la hora de diseñar una web y espero que me podaís ayudar.
Quiero hacer una página para mostrar fotografías de un modo un tanto especial.
Primero, en el centro de la página, se ve la imagen en grande, a 500px. Debajo de esta, se ven las miniaturas del resto de imágenes a 150 px. Al hacer click en las miniaturas, la imagen del centro va cambiando por su respectiva.
Hasta aquí todo perfecto. He usado un script que he encontrado
aquí.
Después, al hacer click en la imagen del centro quiero que se vea la imagen aun más grande, a 800 px, por ejemplo. Para ello, no quiero usar pop-ups, quiero usar
Lightbox. Ya lo había usado anteriormente y me funciona bien, pero Ligthbox solo me muestra la primera imagen, ya que al pulsar en la miniatura el SRC de la imagen del Lightbox no cambia.
Os pego el código que quizás lo entendáis mejor:
Script para Cambiar Imagen Código PHP:
<script language="JavaScript">
function PreCarga (objetoImagen, rutaImagen)
{
if (document.images)
{
eval (objetoImagen +' = new Image()')
eval (objetoImagen +'.src = "' + rutaImagen + '"')
}
}
function CambiarImagen (capa,nombreImagen,objetoImagen)
{
if (document.layers && capa!=null)
eval('document.' + capa + '.document.images["' + nombreImagen + '"].src = ' + objetoImagen + '.src')
else
document.images[nombreImagen].src = eval(objetoImagen + ".src")
}
PreCarga ('imagen1','img/imagen1.jpg')
PreCarga ('imagen2','img/imagen2.jpg')
</script>
HTML del Script:
Código PHP:
// El DIV en el que va cambiando la imagen con el enlace para que funcione Lightbox
<div ID="divImagen">
<a href="img/imagen1grande.jpg" rel="lightbox"><img name="miImagen" src="img/imagen_preliminar.jpg"></a>
</div>
// Miniaturas con el enlace correspondiente para cambiar la imagen de la capa de arriva divImagen
<a href="JavaScript:CambiarImagen ('divImagen','miImagen','imagen1')" class="Estilo1"><img src="img/imagen1thumb.jpg"</a>
<a href="JavaScript:CambiarImagen ('divImagen','miImagen','imagen2')" class="Estilo1"><img src="img/imagen2thumb.jpg"</a>
Yo creo que la clave está en la apa "divImagen" en la que el 'href' se debería actualizar dependiendo de la foto que se esté mostrando en el centro. Pero mis conocimientos de JS son muy limitados.
Si además conocéis otro código mejor para hacer esto, cualquier otra solución o simplemente cambiaríais algo del código, hacedmelo saber ;).
Y si no os hacéis idea de lo que quiero conseguir os subo lo que tengo hecho, que funciona bien salvo por el fallo de que el Lightbox siempre muestra la primera imagen :P.
¡Un saludo y gracias!
Editado: He subido una muestra de lo que tengo ahora mismo
aqui. Está sin CSS ni nada así que sale muy feo xD. Y usar Firefox u Opera porque en IE7 el Lightbox no rula bien ¿?¿?.