Entrar

Botón siguiente y anterior en galería de fotos.

Alvaro20 · · Solicitar retirada
Hola, acabo de hacer una galería de fotos para mi web que me ha quedado muy chuli!!![:)] Lo único que no tengo la opción de los dos botones (anterior y siguiente) me gustaría colocarlo ¿cómo puedo hacerlo? mi código en HTML es este:

<div id="galeria">
<h1>Álvaro</h1>

<div id="galeria-base">
<img src="galeria-dos/gal-dos-uno.jpg" id="imgmostrar">
</div>

<div id="galeria-miniaturas"> 
<img class="miniatura"src="galeria-dos/mini-dos-uno.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-uno.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-dos.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-dos.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-tres.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-tres.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-cuatro.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-cuatro.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-cinco.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-cinco.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-seis.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-seis.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-siete.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-siete.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-ocho.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-ocho.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-nueve.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-nueve.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-gal-diez.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-diez.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-once.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-once.jpg';"></img>
<img class="miniatura"src="galeria-dos/mini-dos-doce.jpg" onclick="document.getElementById ('imgmostrar').src='galeria-dos/gal-dos-doce.jpg';"></img>
</div>

</div>

Mi código en estilos CSS:

#galeria {float: left; margin: 15px 0px 20px 3px; width:950px; height:920px; border:fuchsia 1px solid; border-radius:25px; padding:20px; padding-bottom:0; background-color:#0099CC }
#galeria h1 {float: center; color: black; text-decoration:underline; font-size:24px; margin-top: -15px; margin-left: 3px; margin-bottom: 0px}
#galeria p {color:blue;  font-family:sans-serif;font-size:20px; margin: 0px 0px 0px 0px; font-weight:normal}

#imgmostrar { border: fuchsia 1px solid; border-radius:25px; }

#galeria-miniaturas {display:table; margin: 0px auto; }
.miniatura { float: left; width: 150px; height: 100px; border-radius: 10px; cursor: pointer; padding: 5px; margin: 20px 5px 0px 20px;}

Esto sería todo [:D]
alex222en · · Solicitar retirada
Buenas Alvaro:

Para crear un boton de avanzado y retroceso de imagenes solo necesitas crear un código javascript donde, tento unas variable array con los nombres de cada foto foto [0] = "mifoto.png" y crear un boton donde llame a una funcion que simplemente cambie el nombre de la foto. No te pongo el codigo dado que ahora estoy sin tiempo y es una respuesta rapida, cuando disponga de algo mas de tiempo te coloco el código que yo uso.
Alvaro20 · · Solicitar retirada
Claro, lo que necesito es saber como se hace, he estado investigando por otros sitios pero no consigo nada claro, gracias por tu tiempo![:)]
alex222en · · Solicitar retirada
Buenas Alvaro:

Como te dije en el mensaje anterior no te mande el ejemplo por falta de tiempo. Estuve mirando hoy y encontré el código que yo uso para las diapositivas. Dentro de cada uno los códigos que te dejo tienen comentarios para facilitar el entendimiento del código. Si tienes alguna pregunta no dudes en preguntar.

Si alguien cambia el código y lo mejora no tengas miedo y sube lo para que podamos siempre mejorar.

1º HTML:
<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" src="javascript.js"></script>

<style type="text/css">
	body {
		text-align: center;
	}
	img {
		width: 200px;
		height: 200px;
	}
	#boton_1 {
		float: left;
		position: relative; left: 500px;
	}
	#boton_2 {
		float: right;
		position: relative; right: 500px;
	}
</style>

</head>

<body>

	<button onClick="anterior()" id="boton_1">Anterior</button>
	<button onClick="siguiente()" id="boton_2">Siguiente</button>

	<img src="imagenes/foto_1.jpg" name="Diapositiva">

</body>

</html>

2º Javascript:
// Inicio de la configuración de diapositivas.

	// Declaración de variables.
		var Fotos; // Lugar donde se almacenara la ruta de la imagen.
		var V_max; // Longitud máxima del vector "Fotos".
		var aux;   // Auxiliar para configuración.
		var aux_2; // Auxiliar para programación.

	// Inicio de variables.
		Fotos = new Array(); // Crea el vector para las fotos.
		aux_2 = 0; // Inicia la variable auxiliar de programación con valor 0.

	// Rutas de imagenes.
		Fotos [0] = "imagenes/foto_1.jpg" /* Aqui pones la ruta del enlace a la imagen */ /*PD: eta primera imagen se debe repetir en el HTML*/
		Fotos [1] = "imagenes/foto_2.jpg" /* Aqui pones la ruta del enlace a la imagen */
		Fotos [2] = "imagenes/foto_3.jpg" /* Aqui pones la ruta del enlace a la imagen */
		Fotos [3] = "imagenes/foto_4.jpg" /* Aqui pones la ruta del enlace a la imagen */
		Fotos [4] = "imagenes/foto_5.jpg" /* Aqui pones la ruta del enlace a la imagen */
		Fotos [5] = "imagenes/foto_6.jpg" /* Aqui pones la ruta del enlace a la imagen */
		Fotos [6] = "imagenes/foto_7.jpg" /* Aqui pones la ruta del enlace a la imagen */

		/* Para añadir nuevas imagenes simplemente adicionas "Fotos[] = "ruta imagen" */

		V_max = Fotos.length; // Obtiene la longitud del vector.
		V_max = V_max-1; // Diminuye uno su valor dado que V_max coge un valor a más.

// Fin de la configuración de diapositivas.

// Inicio de la programación de diapositivas.

	// Pasar a la siguiente imagen.
		function siguiente () {
			
			if (aux_2 == V_max){
			
				aux_2 = 0;
			
			}

			else{

				aux_2 = aux_2+1;

			}

			document.images.Diapositiva.src = Fotos[aux_2];
		}

	// Pasar a la siguiente imagen.
		function anterior () {
			
			if (aux_2 == 0){
			
				aux_2 = V_max;
			
			}

			else{

				aux_2 = aux_2-1;

			}

			document.images.Diapositiva.src = Fotos[aux_2];
		}

// Fin de la programación de diapositivas.

PD: iba a subir un archivo zipado con un ejemplo, pero me da error y no he podido, pido disculpas.
Alvaro20 · · Solicitar retirada
MILLONES Y MILLONES DE GRACIAS!! ya lo he puesto, era justo lo que quería, esta perfecto, mil gracias de verdad, me había atascado en esto ahora ya esta como quería!![:)][:)][:)][:)][:)]
alex222en · · Solicitar retirada
Me alegro que te haya funcionado. El foro esta para ayudarnos unos a otros, asi que no te preocupes y cualquier cosa sigue preguntando tus dudas.