Galería de imagenes muy sencilla

Esta es una galería de imágenes muy simple que nos muestran en alistapart.com y que se basa en un script muy pequeño que podemos agregar en cualquier parte de la plantilla, por ejemplo, antes de </head>:

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

Para usarlo, debemos agregar tres partes:

• una lista de enlaces donde el atributo href contendrá la URL de la imagen y el atributo title el texto optativo a ser mostrado
• un bloque o una etiqueta con un ID específico (imgDescripcion) donde se mostrará el texto
• una imagen inicial con un ID (imgContenedor) queserá la que vaya cambiando cuando hagamos click

Hablo de tres partes porque cada una de ellas puede estar en cualquier orden, dependerá de la forma en que se nos ocurra mostrarlo. Por ejemplo:

<ul>
<li><a onclick="return showPic(this)" href="URL_imagen1" title="texto_imagen_1">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="texto_imagen_2">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="texto_imagen_3">3</a></li>
</ul>

<div id="imgDescripcion">el texto inicial</p>

<img id="imgContenedor" src="URL_imagenInicial" />

Este es un ejemplo concreto con algunas variantes, incluyendo propeidades de estilo:

Galería de imágenes

• 1
• 2
• 3
• 4

<style>
div#ejemploGaleria {
  background-color: #123;
  border: 3px solid #234;
  margin: 0 auto;
  padding: 10px;
  width: 480px;
}
span#imgDescripcion {
  color: #ABC;
  float: left;
  font-size: 18px;
  width: 250px;
}
ul#imgListaEjemplo{
  float: right;
  margin: 0;
}
ul#imgListaEjemplo li {
  display: inline;
  padding: 0 5px;
}
ul#imgListaEjemplo li a {
  font-size: 16px;
}
img#imgContenedor{
  margin-top: 10px;
}
</style>

<div id="ejemploGaleria">
<span id="imgDescripcion">Galería de imágenes</span> 
<ul id="imgListaEjemplo">
<li><a onclick="return showPic(this)" href="URL_imagen1" title="Esta es la primera imagen">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="Esta es la segunda imagen">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="Esta es la tercera imagen">3</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen4" title="Esta es la última imagen">4</a></li>
</ul>
<img id="imgContenedor" src="URL_imagenInicial" /></div>