Rotafotos en JS

Kaos #1 Oct '06 Administrador

Bueno aquí viene el problema que necesito resolver, gracias de antemano si tenéis el detalle de leerlo y ayudarme:

Material del que disponemos:

8 imagenes de personajes. (Avatares)
2 flechas q irán situadas debajo de las imagenes de avance y retroceso.
Codigo html donde incrustar las imágenes y el JS.

Que debemos conseguir con el codigo JS? pues en el html solo veremos 1 avatar, con la flecha adelante y atras navegaremos a traves de los diferentes avatares.

Se que hay q utilizar capas. Y jugar con el hidden o el visible. Pero la cuestion del asunto y lo q complica el problema es q necesito q el JS sea un bucle automatico. Es decir hay 8 fotos cuyos nombres son Foto1, Foto2, Foto3, Foto4... hasta 8. De tal forma q el JS debe saber el numero X y a raiz de ese numero sumar o restar uno gracias a los botones de avance y retroceso.

Yo se una manera cutre, pero tiene el problema anterior, no navega de forma automatica por las fotos. Es precisamente lo q no se hacer y necesito poner...

** Este ejemplo sería con dos fotos y es muy cutre pq no contempla el numerito de la foto. Contempladolo solo necesitaria un bucle y el numero en cuestion.

Alguna sugerencia?
Gracias.

VipeR_CS #2 Oct '06

No sé si me he enterado bien, básicamente quieres hacer como una galería de imágenes en JS que controle cuando estás en la 1ª y última foto para no mostrar los botones de avance o retroceso.

Si es eso, quizá te sirva algo que hice hace unos meses, seguro que se puede hacer mejor pero es lo que hay

Primero creas tantos objetos de imagen como necesites en JS, de esta forma:

im1=new Image();
im2=new Image();
im3=new Image();
.....

im1.src="/path/blablabla.jpg";
im2.src="/path/blablabla2.jpg";
.....

Utilizaremos un contador al que llamamos "x" con el valor 1:

x=1;

Y estas son las funciones para avanzar y retroceder que deberás poner en el href de los links de avance y retroceso, o en el onclick en el caso de que sean imágenes con flechitas o dónde sea (en el switch utlizo los valores 17 y 18 porque tengo 18 imágenes, simplemente cambia en función del número de imágenes que tengas. "oculto" en mi caso apunta a la imagen de la flecha de la derecha (avance) y "oculto2" a la flecha de la izquierda (retroceso), para que te hagas una idea del funcionamiento):

function avanzar() {
x++;
oculto=findDOM("drcha",1);
oculto2=findDOM("izqu",1);
switch (x){
case 1: oculto2.visibility="hidden";
break;
case 2: oculto2.visibility="visible";
break;
case 17: oculto.visibility="visible";
break;
case 18: oculto.visibility="hidden";
break;
}

	alante=findDOM("foto",0);
	alante.src=eval ("im" + x + ".src");
	}
	
	function retroceder() {
	x--;
	oculto=findDOM("drcha",1);
	oculto2=findDOM("izqu",1);
	switch (x){
		case 1: oculto2.visibility="hidden";
						break;
		case 2: oculto2.visibility="visible";
						break;
		case 17: oculto.visibility="visible";
						break;										
		case 18: oculto.visibility="hidden";
						break;			
						}
	atras=findDOM("foto",0);
	atras.src=eval ("im" + x + ".src");
	}

El resultado debería ser este:

http://www.principadoasturias.net/2006/marcosga/galeria.html

EDIT: Uis no me di cuenta de que en esa galería estaba utilizando la función findDOM. Simplemente quita todo lo de findDOM y cambia la visibility utilizando el getElementById y listo.

ViPeRDaRk #3 Oct '06

bueno, creo q seria suficiente con saber el nombre de los archivos (y la ruta) y usar lo que has puesto:

foto=document.getElementById("mi_id"); //mi_id puede ser perfectamente la id de un < img id="mi_id" src=..... >
foto.src="images/otrafoto.jpg"; //y asi cambias la foto

te ahorras capas y lo de hidden y visible xD.suerte

PD: puedes poner los nombres de las fotos de forma q cada boton (siguente/anterior) sepa cual es el anterior.. (imagen01.jpg .. 02..03..etc)

Kaos #4 Oct '06 Administrador

#2 , va de puta madre eso , #3 Gracias tb por la optimización.

Peeeeeeeeero, siempre hay un maldito pero, se me escapo algo.

Ese algo es que todo lo que he liado tiene una finalidad, y es q la foto se puede pulsar, todo va dentro de un form. La foto debe ser un input. Al pulsar la foto se envia como valor el nombre de la foto.

Por lo tanto el

Habría q cambiarlo a

Pero claro... a parte necesito un HIDDEN tal q:

No sé que debo poner como value para que se actualice con el nombre de la foto en cuestión...

No se si me expliqué bien... Muchisimas gracias de todas formas por el curro de las respuestas os debo una.

VipeR_CS #5 Oct '06

No se ve el código del último mensaje, pon espacios en las etiquetas

Usuarios habituales