FrogJS: Galería de imágenes con Prototype

FrogJS es una galería de imágenes que con muy poco, crea un efecto muy vistoso e incluye la opción de soportar textos adicionales y enlaces.

Requiere Prototype + Scriptaculous así que, si no las tenemos en nuestra plantilla, primero, deberemos agregar esas librerías.

Luego, descargamos el ZIP donde, lo único necesario es el archivo frog.js que agregaremos a la plantilla.

<script type="text/javascript" src="URL_frog.txt"></script>

El CSS es muy sencillo. Lo colocamos inmediatamente después:

<style type="text/css">
  #FrogJS { /* es el bloque donde se mostrará la galería */
    height: 650px; /* el alto total */
    margin: 0 auto; /* será centrado */
    width: 600px; /* el ancho total */
  }
  #FrogJSCredit { /* son los textos visibles del atributo TITLE */
    /* cualquier propiedad */
  }
  #FrogJSCaption { /* son los textos visibles del atributo ALT */
    /* cualquier propiedad */
  }
</style>

Para usarla, sólo debemos colocar una serie de enlaces dentro de un DIV al que le daremos un ID exclusivo llamado FrogJS:

<div id="FrogJS">
  <a href="URL_imagen" title="texto optativo" rel="URL_optativa">
    <img src="URL_miniatura" alt="texto optativo" />
  </a>
  .......
</div>

Lo logico es tener dos imágenes, la de tamaño normal y una miniatura pero, también sería posible usar sólo una y redimensionarla en el HTML:

    <img src="URL_imagen" alt="texto optativo" width="tamaño" />

En el atributo HREF del enlace, colocamos la imagen "grande"; en el atributo TITLE el texto (optativo) que se verá inmediatamente debajo y en el atributo REL el enlace optativo a alguna página.

En la etiqueta IMG colocamos la miniatura y en su atributo ALT, el texto inferior optativo.

Modificando el script, podemos configurar algunos detalles extras:

// CONFIGURATION VARIABLES
var thumbTop = '60px'; // es la distancia superior de las miniaturas
var loadingAni = 'images/loading.gif'; // es la imagen de carga que se muestra al cargar las imágenes
var scalePercent = '300'; // la escala del efecto fade

Un detalle más. Aconsejan agregar, luego del DIV, un script para ocultar la galería mientras esta se carga. Para evitar tener que hacer eso, agregué ese código en el archivo de esta manera. Vamos al final y ponemos:

function frogHIDEthumbs() {
  var ribbit = document.getElementById('FrogJS');
  ribbit.innerHTML += '<center>... cargando ...</center>';
  // o bien si queremos una imagen en lugar del texto
  // ribbit.innerHTML += '<img src="URL_imagen" />';
  var anchors = ribbit.getElementsByTagName('a');
  for (var i=0; i
    anchors[i].style.display = 'none';
  }
}

Así que, en el post, luego del DIV escribo:

<script type="text/javascript">frogHIDEthumbs();</script>