Highslide JS

Esta librería la he utilizado para visualizar imágenes (sueltas o agrupadas en una galería); desde mi punto de vista su mayor virtud es que permite utilizar thumbnails para cargar la página más rápido y versiones de buena calidad que son desplegadas al momento en que el usuario hace clic sobre la imagen que le interesa. Además de útil sus efectos la hacen muy vistosa, lo cual evidentemente es un valor agregado.

Instalación:

Incluir lo siguiente:

<link rel="stylesheet" type="text/css" href="/highslide/highslide.css">
<!--[if lt IE 7]>

  <link rel="stylesheet" type="text/css" href="/highslide/highslide-ie6.css">

<![endif]-->

Uso:

Si se trata de una imagen aislada se debe incluir el archivo highslide.js y utilizar el siguiente código de inicialización*:

hs.registerOverlay({
overlayId: 'closebutton',
position: 'top right',
fade: 2
});

hs.graphicsDir = '/highslide/graphics/';
hs.wrapperClassName = 'borderless';

La imagen se incluiría de la siguiente manera:

   <div id="imagen">
       <a href="imagenOriginal.jpg" class="highslide" onclick="return hs.expand(this)">
       <img src='thumbnail.jpg' alt="Highslide JS" title="Click to enlarge" width='100' height='140' ></a>
       <div id="closebutton" class="highslide-overlay closebutton" onclick="return hs.close(this)" title="Close"></div>
   </div>

La galería requiere del archivo highslide-with-gallery.js y se puede inicializar de la siguiente manera*:

hs.registerOverlay({
 overlayId: 'closebutton',
 position: 'top right',
 fade: 2
});

hs.wrapperClassName = 'borderless';
 hs.graphicsDir = '/highslide/graphics/';
 hs.align = 'center';
 hs.transitions = ['expand', 'crossfade'];
 hs.outlineType = 'rounded-white';
 hs.fadeInOut = true; 

 // Add the controlbar
 hs.addSlideshow({
  //slideshowGroup: 'group1',
  interval: 5000,
  repeat: false,
  useControls: true,
  fixedControls: 'fit',
  overlayOptions: {
   opacity: .75,
   position: 'bottom center',
   hideOnMouseOut: true
  }
 });

Los elementos deben estar dentro de un <div class='highslide-gallery'>, cada uno con el siguiente código:

<a href='imagenOriginal.jpg' class='highslide' onclick='return hs.expand(this)'>
       <img src='thumbnail.jpg' width='90' height='115' title='Click to enlarge'>
   </a>

* se pueden modificar, agregar y quitar atributos para lograr otro tipo de efectos

En Highslide JS se puede obtener información más detallada, ejemplos, tutoriales y el código fuente.

NOTA: Yo he empleado la versión 4.0.10, así que no sabría si algunas de las cosas que he dicho ya no son válidas para la versión más reciente (4.1)