Galeria de imagenes haciendo que una imagen sustituya a la otra en la misma pagina.

Alex Cruz · #1 (**permalink**) 01/01/2005, 00:01

Veran, yo quiero poner en mi galeria algo asi:

Posters: 1,2,3,4,5,6,7. Pinups: 1,2,3,4,5. Paginas: 1,2,3,4,5,6.

"imagen centrada".

Quiero que el internauta haga click en los numeros (que son links), y abajo vaya cambiando la imagen que se muestra.

Saludos!!!

JavierB · #2 (**permalink**) 01/01/2005, 04:34

Hola Alex Cruz

Veamos si este código te ayuda:

Código HTML:

<html>
<head>
<title>Untitled</title>
<script>
function cambiar(im) {
  document.getElementById('imagen').src=im;
}
</script>
</head>
<body>
<div style="text-align:center">
<a href="#" onclick="cambiar('imagen1.jpg');return false">1</a>
<a href="#" onclick="cambiar('imagen2.jpg');return false">2</a>
<a href="#" onclick="cambiar('imagen3.jpg');return false">3</a>
<br />
<img id="imagen" />
</div>
</body>
</html>

Saludos,

mon · #3 (**permalink**) 01/01/2005, 10:00

Gracias JavierB, creo que me podría valer a mi para poder usarlo con php pero necesitaria que, sin cambiar lo que hay entre <script> </script> en la cabecera, también me diese la opciòn de tener dos botones uno atrás y otro adelante para que pasasen las imagenes, venga muchas gracias y aver si me puedes hechar una mano

JavierB · #4 (**permalink**) 01/01/2005, 11:34

Hola mon

Aquí te dejo el código un poco modificado:

Código HTML:

<html>
<head>
<title>Untitled</title>
<script>
var foto=0;
var maxFoto=3; //nº máximo de fotos

function mostrar(num) {
  foto+=num;
  if(foto>maxFoto) foto=1;
  if(foto<1) foto=maxFoto;
  cambiar('imagen'+foto+'.jpg');
}
function cambiar(im) {
  imagen.src=im;
}
</script>
</head>
<body>
<div style="text-align:center">
<a href="#" onclick="cambiar('imagen1.jpg');return false">1</a>
<a href="#" onclick="cambiar('imagen2.jpg');return false">2</a>
<a href="#" onclick="cambiar('imagen3.jpg');return false">3</a>
<br />
<img name="imagen" />
<br>
<input type="button" value="-" onclick="mostrar(-1)" />
<input type="button" value="+" onclick="mostrar(1)" />
</div>
</body>
</html>

Saludos,

mon · #5 (**permalink**) 01/01/2005, 13:36

Muchísimas gracias JavierB, voy a probar a ver si soy capaz de mezclarlo con php para poder hacer esto en el resultado de una consulta, ya te comentaré algo, lo dicho muchas gracias y felíz año

Alex Cruz · #6 (**permalink**) 02/01/2005, 01:42

Hola Javier!!! Esta de lujo tu javascript, de lo mejor. Pero tengo un pequeño problema con el.

Veras, cuando se abre la pagina, no muestra la imagen en el centro que yo puse. Las imagenes se empiezan a ver, hasta que hago click en los links.

Como hago para que cuando se abra la pagina, muestra inicialmente una imagen en el centro???

Este es el script con el que he estado trabajando toda la tarde:

--------------------------

http://mx.geocities.com/ocielsanchez..._CARTELES.HTML

------------------------

Saludos!!!

mon · #7 (**permalink**) 02/01/2005, 03:02

Hola Alex Cruz, mira sustituye esto:

<img name="imagen" />

Y pon esto:

<img src="imagen1.jpg" name="imagen"/>

Así te mostrará ya de mano la imagen que tu quieras, en este caso imagen1.jpg

Salu2

Alex Cruz · #8 (**permalink**) 02/01/2005, 07:45

Gracias por responder Mon, no me estaba jalando porque lo escribia asi:

<img src="http://www.tonamelt.com/Tonamelt%20Web/Tonamelt%20Cartel.jpg" name="imagen"/>

Pero ya me cayo el veinte, que tiene que ser asi:

<img src="http://www.tonamelt.com/Tonamelt%20Web/Tonamelt%20Cartel.jpg" name="http://www.tonamelt.com/Tonamelt%20Web/Tonamelt%20Cartel.jpg"/>

Gracias Mon. Saludos!!!