Cómo crear una galería de imágenes sencilla
Las galerías de imágenes comúnmente son construidas con un arreglo que contiene las imágenes y descripciones pertenecientes, así para poder mostrarlas sólo se desplaza por dicho arreglo para poder ir mostrando cada elemento, claro, con un poco de librerías y frameworks los efectos pueden ser tan complejos como queramos, pero en este tutorial les voy a enseñar el núcleo de cómo crear una galería de imágenes sencilla usando javascript, usando un método sino fácil, sencillísimo en donde aprenderemos a crear un script tan sencillo que luego podrán mejorarlo y agregarle efectos.
Así que, para este ejemplo, se van a usar dos arrays; la primera contendrá la dirección URL de una serie de imágenes y la segunda, los textos asociados a cada una de esas imágenes:
var foto = new Array();
foto[0] = "URL_imagen_1.png";
foto[1] = "URL_imagen_2.png";
foto[2] = "URL_imagen_3.png";
foto[3] = "URL_imagen_4.png";
foto[4] = "URL_imagen_5.png";
var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";
Los arrays tienen muchas funciones y propiedades internas que podemos utilizar, ahora, nos limitaremos a una de ellas que es la que nos dice cuántos elementos tiene:
var cantidad = foto.length;
Pero necesitamos un dato más, debemos llevar la cuenta, saber cuál es la imagen que estamos viendo para poder saber cuál es la siguiente y cuál es la anterior así que la guardaremos en alguna parte y al inicio, su valor será cero ya que la imagen visible es la primera:
var cualvemos = 0;
function mover(direccion) {
// accedemos al objeto que contiene la imagen
var laimagen = document.getElementById("misfotos");
// accedemos al objeto que contiene el texto
var eltexto = document.getElementById("mistextos");
// ¿cuál es el indice de la última imágenes en nuestra array?
var ultima = foto.length - 1; // en el ejemplo, será el 4
// antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
// si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
if(auxiliar < 0) { auxiliar = ultima; }
// si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
if(auxiliar > ultima) { auxiliar = 0; }
// listo, ahora ya podemos cambair el dato sin problemas
cualvemos = auxiliar;
// ponemos la dirección URL de la imagen en la etiqueta IMG
laimagen.src = foto[cualvemos];
// ponemos el texto en la etiqueta SPAN
eltexto.innerHTML = texto[cualvemos];
}
Así que, para que el ejemplo funcione, bastará entonces cambiar los enlaces y llamar a la función que acabamos de crear:
<a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>
