Un visor de imágenes para Blogger

Hace tiempo que busco una forma de poder mostrar imágenes en una ventana independiente del blog; algo que permita hacer click y que se abra rápidamente sin salir de la página. En realidad, hay muchas rutinas y ejemplos de esto, pero, o no sirven en Blogger, o son muy pesados o son muy complicadas de utilizar.

Aunque no dejaban de ser interesantes, descarté Prototype y sus variantes, Hoverbox, GreyBox, WZ_Tooltip y Lightbox, aunque fue el que más cerca estuvo de cubrir mis necesidades.

Finalmente, un script de DynamicDrive terminó (por ahora) con mi búsqueda.

Este es un simple EJEMPLO.

Image Thumbnail Viewer es una rutina muy sencilla, de apenas 7KB que puede aplicarse a cualquier enlace para cargar una imagen sin necesidad de esta escribiendo códigos interminables, basta agregarle a la etiqueta del vínculo, el atributo rel="thumbnail".

El diseño de la ventana que contendrá la imagen es fácilmente personalizable y podemos elegir si queremos que se agregue algún texto a modo de título o si queremos que se abra con un efecto tipo fade.

Lo primero que necesitamos es descargar el archivo thumbnailviewer.js y editarlo para establecer nuestras opciones.

Abrimos el block de notas y allí, al inicio del archivo, nos encontraremos con esto:

// -----------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive
// available at: http://www.dynamicdrive.com
// Last updated: Jan 22nd, 2007
// -----------------------------------------------------

var thumbnailviewer={
enableTitle: true,
enableAnimation: true,
definefooter: '<div class="footerbar">CLOSE X</div>',
defineLoading: '<img src="loading.gif"/> Loading Image...',

El resto del archivo no nos interesa, en esas cuatro líneas está todo lo necesario para configurarlo:

enableTitle: podemos poner true si queremos incluir textos en las imágenes o false si no queremos.
enableAnimation: podemos poner true si queremos incluir el efecto fade o o false si no queremos.
definefooter: esta línea define la forma en que se mostrará un pie de página en la nueva ventana que nos permitirá cerrarla. Simplemente, podemos cambiar el texto CLOSE X por cualquier otro.
defineLoading: esta línea define la forma en que se mostrará una advertencia mientras se va cargando la imagen. Podemos colocar cualquier imagen de carga, por ejemplo: loading.gif que debemos alojar previamente en algún servidor y luego copiar la dirección URL correspondiente y, además, cambiar el texto o eliminarlo.

Una vez hecho esto, guardamos el archivo y lo subimos a un servidor.

Ahora, nos toca establecer las propiedades CSS de la ventana; para esto, hay dos métodos. El primero es bajar el archivo correspondiente: thumbnailviewer.css, editarlo y subirlo a un servidor propio.

Si empleamos este método, en la plantilla de Blogger incluiremos ambos archivos, la hoja de estilo CSS y el script, ambos en el HEAD de nuestra plantilla, por ejemplo, inmediatamente antes de la etiqueta </head>:

<link rel="stylesheet" href="URL_thumbnailviewer.css" type="text/css" />
<script src="URL_thumbnailviewer.js" type="text/javascript"></script>

El segundo método consiste en copiar y pegar el contenido del estilo en la plantilla, de este modo, es más sencillo de editar y retocar cuantas veces queramos, algo que, con un archivo externo, nos obligaría a tener que reemplazarlo una y otra vez. En este caso, procedemos de manera similar, en el HEAD de nuestra plantilla, inmediatamente antes de la etiqueta </head> agregamos lo siguiente:

<style type="text/css">

/* este es el rectángulo total de la ventana */
#thumbBox {
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px; /* el ancho del borde */
padding-bottom: 0;
background: #313131; /* el color de fondo */
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

/* este es el rectángulo del pie de página */
#thumbBox .footerbar {
/* propiedades del texto "CERRAR" */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: #FFFFFF;
padding: 5px 0;
text-align: right;
/* propiedades que podemos agregar: background-color, border */
}

/* es el rectángulo interior que contendrá la imagen y el eventual título */
#thumbBox #thumbImage {
background-color: #FFFFFF; /* el color de fondo */
/* podemos agregar otras propiedades, por ejmeplo, para las fuentes de los textos */
}

/* es la advertencia de carga que se muestra antes de abrirse la ventana */
#thumbLoading {
position: absolute;
visibility: hidden;
border: 1px solid black; /* el borde */
background-color: #EFEFEF; /* el color de fondo */
padding: 5px; /* márgenes */
z-index: 5;
/* podemos agregar otras propiedades para las fuentes, etc */
}
</style>

<script src="URL_thumbnailviewer.js" type="text/javascript"></script>

Bueno, ya está, ahora podemos usar la rutina en cualquier parte del blog, en un post o en la sidebar.

Este, es el código de un enlace normal:

<a href="URL_imagen">ENLACE</a>

Este, es el código de un enlace utilizando el script:

<a href="URL_imagen" rel="thumbnail" title="texto">ENLACE</a>

Como se ve, sólo agregamos dos cosas. La primera, rel="thumbnail", esto es obligatorio, en realidad, es lo que hace que funcione el script. La segunda, title="texto" es opcional y sólo la usaremos si hemos puesto enableTitle=true.

El script puede utilizarse en cualquier tipo de enlace.