Problemas programando una galería en Javascript.

[haga41]

Hola a todos,

Estoy intentando programar en javascript la típica galería de imágenes en la que ves las fotos en miniatura y una foto grande justo encima, al pulsar en la miniatura esa misma foto pero más grande(otro archivo en realidad) se carga en la imagen grande y así con todas las miniaturas, es decir algo como lo de esta web pero en sencillo.

El código que tengo hasta ahora es este:

Código HTML:

<script type="text/javascript">
<!--
function mostrar(){
var ruta = document.im1.src;
document.imagengrande.src = "g" + ruta;

}
</script>

<div>
       <img src="imagenes/gim1.gif" alt="imagen 1" name="imagengrande" title="imagen 1" />
	<div class="imagenes" style="float:left">
	<a href="#" onclick="mostrar();"><img src="imagenes/im1.gif" name="im1" alt="imagen1"  /></a>
</div> 

La idea es que al pulsar en la imagen se active la función mostrar, y la imagen grande cambia por la versión grande "g" + ruta de esa foto, en este caso sería "gdv1.gif", en este momento sería la misma foto que la que ya está pero probandolo con otras imágenes tampoco funciona.

Si alguien puede darme alguna pista para arreglarlo se lo agradecería mucho.

[David]

Es que como en tu src tienes "imagenes/imagen.ext" al añadirle el "g" buscaría en otra carpeta: "gimagenes/...", tienes la opción de crear esa carpeta y colocar las imágenes grandes allí, o usar un split para separar la carpeta del nombre del archivo.

Saludos .

[JavierB]

Hola haga41

A ver si te sirve esto:

Código javascript:

function mostrar(){
var ruta = document.im1.src;
ruta = ruta.split('/');
document.imagengrande.src = ruta[0]+'/g'+ruta[1]
}
 

Saludos,

[haga41]

Muchas gracias a los dos por responder tan rápido,

JavierB, he probado tu método y con unos ajustes que he tenido que hacerle porque tengo el sitio un poco caótico en local para las rutas va perfecto.

Lo único malo es que no me he dado cuenta de que esa función sólo vale para im1 es decir que tendría que crear un mostrar2 idéntico para im2, etc.

¿Esto se soluciona con el this o algo así no? He intentado mirar un poco pero no encuentro lo que quiero.

Ya lo he conseguido arreglar, al final ha quedado así:


<script type="text/javascript">
<!--
function mostrar(nombre){
var ruta = document.images[nombre].src;
ruta = ruta.split('/');
document.imagengrande.src = ruta[0]+'/'+ruta[1]+'/'+ruta[2]+'/'+ruta[3]+'/'+ruta[4]+'/'+ruta[5]+'/g'+ruta[6]
}
</script>

<div>
<img src="imagenes/gim1.gif" alt="imagen 1" name="imagengrande" title="imagen 1" />
<div class="imagenes" style="float:left">
<a href="#" onclick="mostrar('im1');"><img src="imagenes/im1.gif" name="im1" alt="imagen1" /></a>
</div>

[caricatos]

Hola:

Si le pasases el parámetro de la ruta de la imagen (o algo para obtenerla como por ejemplo el objeto this, pero esa idea es mejor implementarla abriendo la imagen grande, después de pinchar en la propia imagen,,,) sería fácil reutilizar el código.

Saludos

[caricatos]

¡Je, je!... como si me hubieras leído el pensamiento.

Saludos

[haga41]

Pues sí, he estado haciendo pruebas con cosas que veía por ahí pero no acababa de pillarle el truco, de todas formas ¿cúal sería la diferencia haciendolo con "this"?
Hace años andaba más al día de Javascript y Actonscript y recuerdo que se usaba bastante pero ahora no lo recuerdo muy bien.

Saludos

[caricatos]

Hola:

Sobre this, si la llamada se hace desde la misma imagen, con el evento click (la mano de los enlaces se puede poner con estilos:

<img src="imagenes/gim1.gif" alt="imagen 1" title="imagen 1" onclick="mostrar(this)" style="cursor: pointer"/>

Para averiguar el atributo src, es directo...

function mostrar(imagen){
mi_src = imagen.src;
mi_src_array = mi_src.split("/");
mi_src_array[mi_src_array.length - 1] = "g" + mi_src_array[mi_src_array.length - 1];
document.imagengrande.src = mi_src_array.join("/");
}

De todos modos, al revisar el caso, también sería mejor, poner la ruta de parámetro, y la función sería trivial... incluso no habría que definir la función mostrar...

onclick="document.images.imagengrande.src = 'imagenes/gimi.gif'"

Saludos

[haga41]

Hola caricatos,

Muchas gracias por la explicación, más o menos la entiendo pero lo que más claro me ha quedado ha sido que haciendolo como dices en la última frase, es decir diciendo exactamente lo que quieres, te ahorras la función.

Una duda tonta que tengo ahora, que probablement tenga más que ver con accesibilidad y usabilidad, es como usar algo parecido a los anclas pero que sirva en Firefox ya que para que fuese más agradable la página puse un ancla justo antes del final del body: <a name="f"></a> y en los a href puse "#f" de forma que al pinchar en los enlaces en vez de cargar la página desde el principio, los carga justo donde estan. El problema es que Firefox, al menos en la versión que estoy probando: 3.04. ¿Hay alguna forma de decirle al Firefox que al pulsar vaya al final de la página?