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

jueves, noviembre 25, 2010
COMPARTE EL POST

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)

¡Síguenos en Twitter!


Deja tu comentario