Galería imágenes JS + Lightbox

[coke_135]

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

[coke_135]

¿Nadie puede ayudarme?

Llevo un par de dias probando y me es imposible.

Simplificando la pregunta para quien no desee leerla ni estudiar el código, creo que lo que necesito es, ¿cómo cambiar el "href" de un enlace desde Javascript? La función que tengo cambia el "src" de una imagen. Quiero que esa función además de cambiar el "src" de una imagen,cambie también el "href" de un enlace que se encuentra en la misma capa.

Gracias :).

[JavierB]

Hola coke_135

Si tienes este enlace:

<a href="pagina.html" id="algo">Enlace</a>

Puedes cambiarlo con:

document.getElementById('algo').href = 'otrapagina';

Saludos,

[coke_135]

Muchísimas gracias JavierB.

Ya funciona como yo quería ;). Ahora intentaré pulir algo la función de intercambio de imagenes que creo que se puede mejorar :).

¡¡Un saludo y gracias de nuevo!!

Edito: Ahora está mejor. El cambio de imagenes y del href es ahora una función de dos lineas.

Código HTML:

	function CambiarImagenLink(NombreFoto,RutaFoto,RutaLightbox)
	{
		document.getElementById(NombreFoto).src = RutaFoto;
		document.getElementById('LightboxLink').href = RutaLightbox;			
	}

Si a alguien le interesa todo el código lo posteo y lo explico :).

Un saludo

[lisseth]

A mi me interesaria mucho tu codigo y porfa el enlace hacia tu web para ver como te quedo el sitio y el funcionamiento de la galeria de imagenes. gracias.

[zyon]

si haslo, sera interesante verlo!!!!

[coke_135]

Dadme unos días y os posteo toda la info.

Un saludo

[zyon]

Ok, lo estaremos esperando!!!!

[emal011]

Iniciado por coke_135

Dadme unos días y os posteo toda la info.

Un saludo

mas de 1 ano y no ha posteado nada...

[JavierB]

El mensaje original es de hace más de 1 año. Por favor, no reviváis temas tan antiguos.

Saludos,