Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Galería de imágenes en Javascript

por Jeremy Keith

Crear una galería de imágenes en línea debería ser un proceso rápido. El intervalo entre tomar la foto y publicarla en la web debería ser mínimo. Aquí tenemos un sistema fácil y rápido para crear una galería de imágenes en una sola página que utiliza JavaScript para cargar las imágenes y sus pies de foto al instante.

El código

He preparado una serie de fotos que quiero introducir en una galería en línea. La forma más fácil de enlazar las imágenes es colocarlas en una lista como ésta:

<ul>
<li><a href="images/bananas.jpg" title="Bananas en una mesas">bananas</a></li>
<li><a href="images/condiments.jpg" title="Condimentos en un Restaurante Chino">dos botellas</a></li>
<li><a href="images/shells.jpg" title="Conchas en una mesa">caparazones</a></li>
</ul>

Al hacer clic en uno de esos enlaces nos lleva directamente a la imagen. Voy a emplear JavaScript para interceptar ese clic y en lugar de ello, realizar una acción diferente.

El JavaScript va a actualizar dinámicamente una imagen que reserva el espacio y la descripción, creando un efecto de pase de imágenes.

Utilizaré una imagen vacía en forma de .gif. También es posible utilizar la primera imagen de mi galería para crear una especie de imagen introductoria. Lo único importante es que esa imagen y su descripción tengan un ID único. Voy a llamar el párrafo descriptivo, el pie, desc y a la imagen la llamaré placeholder.

<p id="desc">Elige una imagen para empezar</p>
<img id="placeholder" src="images/blank.gif" alt="" />

No añadas un valor de alto o ancho, con los atributos height o width a la imagen que reserva el espacio, ya que las imágenes en la galería se alterarían para mostrarse en ese tamaño..

La función de JavaScript

Ahora escribimos el JavaScript. Se debe colocar en la parte <head> del documento, o en un archivo externo enlazado. Llamaré a la función showPic

function showPic (whichpic)

Como verás, la función sólo requiere un parámetro: whichpic. Se refiere al enlace que señala la pintura que quiero mostrar.

La función showPic interactuará con los elementos desc y placeholder referiéndose directamente a sus IDs. Lo primero que necesito hacer es asegurarme de que esta función puede realizarla el navegador, asegurándome de la existencia de document.getElementById:

if (document.getElementById)

Si el navegador pasa este test, la imagen de reserva se puede borrar. Esto se hace reemplazando el valor src de la imagen con el valor href del enlace whichpic :

document.getElementById('placeholder').src = whichpic.href;

Al mismo tiempo, quiero que desaparezca el texto dentro del párrafo desc. Podría utilizar código especial de JavaScript como innerHTML pero hay una solución que funciona en todos los navegadores, childNodes[0].nodeValue. Esta expresión significa que el valor del primer nodo hijo de un elemento. En nuestro caso será el texto dentro del elemento.

El texto desc se puede reemplazar con el texto del enlace whichpic link:

document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;

Pero aún sería mejor reemplazar el texto desc con el contenido del atributo title del enlace whichpic:

document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.title;

No necesito decidir arbitrariamente por uno de ellos. Puedo probar la existencia de un atributo title. Si existe, utilizo ese texto. En caso cotnrario, utilizo el texto del enlace:

if (whichpic.title) {
   document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.title;
} else {
   document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}

Finalmente, quiero asegurarme de que el enlace whichpic no se seguirá, devolviendo el valor false:

return false;

A menos, claro de que el navegador no entienda document.getElementById. En ese caso, quiero que el enlace sí pueda seguirse, es decir, deberá devolver el valor true.

Aquí está la función terminada:

<script type="text/javascript" language="javascript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder')»
  .src = whichpic.href;
  if (whichpic.title) {
   document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>

Para llamar la función

Lo único que falta es llamar la función para cada uno de los enlaces. Para pasar el valor de whichpic, cada uno de los enlaces podría tener un único ID. Sin embargo, es mucho más fácil pasar el valor this lo que podría significar que whichpic tendrá el valor de “this, este elemento que llamará la función.”

Utilizaré el llamador de eventos onclick (también sería buena idea emplear onkeypress para las personas que naveguen sólo con teclado). Ya que la función showPic determina si el enlace es seguido o no, quiero que la acción de hacer clic haga que se devuelva lo que la función determine. Si la función determina false, el enlace no se sigue. Esto se consigue emplieando onclick="return showPic(this)".

<ul>
<li><a onclick="return showPic(this)" href="images/bananas.jpg" title="Bananas en una mesa">bananas</a></li>
<li><a onclick="return showPic(this)" href="images/condiments.jpg" title="Condimentos en un restaurante chino">two bottles</a></li>
<li><a onclick="return showPic(this)" href="images/shells.jpg" title="Conchas en una mesa">caparazones</a></li>
</ul>

Veamos esta galería en acción.

Elige una imagen para empezar

Y aquí lo tienes: una galería de imágenes sencilla en JavaScript. Degrada bien, de manera que los navegadores antiguos todavía pueden seguir los enlaces y ver las imágenes. Funciona como debe en on IE5+, Netscape 6+, Safari y todas las variantes de Mozilla como Firefox y Camino en Windows y Mac.

Jeremy Keith es un desarrollador de web independiente que vive y trabaja en Brighton, en el sur de Inglaterra. Cuando no está creando sitios web, toca el bouzouki con la banda Salter Cane. Su propia web se llama Adactio.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]