Crear una galería de imágenes con JavaScript

Eso de permutar imágenes, es lo que hace cualquier script de slideshows; lo hará de modo sencillo o lo hará de modo complejo pero, conceptualmente, hacen eso, usan JavaScript para cambiar una propiedad específica que es la que contiene la dirección URL de la imagen que estamos viendo.

Supongamos que diseñaramos algo así:

la primera de las imagenes

anterior | siguiente

<style>
  div.demoSW {
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 326px;
  }
  div.demoSW img {
    background-color: #FFF;
    border: 3px solid #BBB;
    height: 190px;
    outline: 1px solid #FFF;
    padding: 10px;
    width: 300px;
  }
  div.demoSW span {
    color: #EEE;
    display: block;
    font-family: Georgia;
    font-size: 20px;
    letter-spacing: -1px;
    outline: 1px solid #444;
    padding: 5px 0;
  }
  div.demoSW div a {
    color: #AAA;
    font-family: Georgia;
    text-decoration: none;
  }
  div.demoSW div {
    margin:5px 0 0 0;
  }
  div.demoSW div a:hover {
    color:#FFF;
    text-decoration: none;
  }
</style>

<div class="demoSW">
  <img id="misfotos" src="URL_imagen_1" />
  <span id="mistextos"> la primera de las imagenes </span>
  <div>
    <a href="#"> anterior </a> | <a href="#"> siguiente </a>
  </div>
</div>

La idea es que cuando hagamos click en los enlaces anterior y siguiente, podamos navegar por otras imágenes y claro, así como está, no funcionará porque, como siempre, el tema es decirle al navegador cuáles son las imagenes que usaremos y para eso hay métodos diversos, dependiendo de ellos, nuestro script será más o menos flexible, podremos colocar uno solo de ellos por página o podremos colocar varios. Lo más simple, claro, es lo menos flexible pero así es la vida.

Lo que vamos a hacer entonces es usar un array que no es otra cosa que un conjunto de datos asociados a un nombre a los que podemos acceder con un índice. Muchas palabras raras pero veamos:

var meses = new Array();
meses[0] = "enero";
meses[1] = "febrero";
meses[2] = "marzo";

Son "variables" similares a las que utilizamos normalmente excepto que todas tienen el mismo nombre y se las diferencia por el número de orden que siempre comienza con cero.

No hace falta definirlas de ese modo, también podemos hacerlo en una sola línea:

var meses = new Array("enero","febrero","marzo");

Así que, para este ejemplo, voy 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;

que en este caso nos dirá 5 ya que tenemos elementos numerados desde el cero al cuatro; es decir tenemos cinco imágenes y cinco textos.

Ahora, vamos a crear una función para manipular las etiquetas IMG y SPAN a las que hemos identificado como misfotos y mistextos con respectivos IDs. La llamaremos mover y le enviaremos un dato; para decirle que queremos ir hacia atrás le enviaremos un -1 y para decirle que queremos ir hacia adelante, le enviaremos un 1 así que mover(-1) debería mostrar la imagen anterior y mover(1) debería mostrar la imagen siguiente.

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 cambiar 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>