Cómo crear una galería de imágenes sencilla

galeria-imagenesLas 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.

ver el tutorial completo

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>


Ver el ejemplo online (se encuentra en la parte inferior)

Cómo crear una galería de imágenes sencilla Cómo crear una galería de imágenes sencilla Reviewed by Marcos Rivas on jueves, noviembre 25, 2010 Rating: 5