Ayuda Javascript: Fade in para imágenes ya cargadas
Hola!
Mi experiencia con javascript es poca (copia-pega, cambiar algún evento o parámetro...)
Estoy haciendo una galeria de fotos en HTML y CSS.
En la parte inferior he puesto unos thumbnails, al pinchar sobre ellos se muestra la imagen en grande en la parte de arriba.
Cada imagen grande está en un div, uno encima de otro, de manera que sólo se ve la primera y están vinculadas a través del ID a los thumbnails.
Resumiendo:
Las fotos grandes están en capas así:
<div id="foto1"><img src="imagen-grande1.jpg" /></div>
<div id="foto2"><img src="imagen-grande2.jpg" /></div>
y los thumbnails así:
<a href="#foto1"><img src="thumbnail.jpg" /></div>
<a href="#foto2"><img src="thumbnail.jpg" /></div>
Me gustaría poder añadir un efecto fade in con javascript para la transición entre imágenes, similar al que vienen usando muchos usuarios de indexhibit.
El problema es que no logro aplicarlo a mi caso, creo que porque las imágenes ya están cargadas, aunque no son visibles hasta que pinchas en su thumbnail correspondiente.
Con lo que el evento "onload" no me sirve ¿Existe algún otro evento de javascript que me pudiera servir? O alguna función de jquery? No he conseguido encontrar nada que me funcione.
Gracias ;)
inma
Hola Adrià! Muchas gracias! Voy a probar :)
adriia
Hola Inma!
En el link que has posteado parece que al hacer clic en los "next" y "prev" la imagen nueva aparezca encima. Yo provaría con fadeIn y la propiedad del z-index. Por ejemplo, primero pones la imagen donde se ha hecho clic encima de las otras (transparente sin que se vea) y luego le das al fadeIn para que aparezca.
De todos modos no sé hasta que punto es bueno tener todas las imágenes cargadas desde el principio. Si usas el indexibit lo que sería más fácil es instalarte el plugin para crear los pases entre imágenes de esa forma.
Puedes encontrar el fadeIn en: http://api.jquery.com/fadeIn/
Espero haberte ayudado!:)