PopBox

Gracias a Cosas Sencillas llegué hasta PopBox que es una impresionante librería escrita en JavaScript que nos permite mostrar imágenes utilizando diferentes efectos de ampliación, moviéndolas o redimensionándolas de manera dinámica y, por lo que he visto, funciona perfectamente tanto en Firefox como en Internet Explorer.

PopBox.js es el script en si mismo
PopBoxStyles.css es la hoja de estilo (podemos copiar su contenido directamente en Blogger)

Las imágenes ya están alojadas en ImageShack pero pueden ser cambiadas o reubicadas siempre que editemos los archivos que las utilizan:

magminusCUR.gif y magplusCUR.gif son los cursores utilizados en la hoja de estilo. Eventualmente, pueden usarse las mismas pero en formato CUR
magminus.gif y magplus.gif son los cursores incluidos en el script y spinner40.gif es la imagen de carga.

Para probarla, sólo debemos agregar el script y la hoja de estilo antes de </head>:

<script src="URL_PopBox.js" type="text/javascript"></script>
<link type="text/css" src="URL_PopBoxStyles.css" />

Dentro del script hay una serie de variables que hacen referencia a ciertos datos internos (incluyendo las imágenes) que podemos personalizar sin necesidad de tocar los archivos. Basta agregar los cambios en la plantilla, inmediatamente después de las dos instrucciones anteriores:

<script type="text/javascript">
popBoxWaitImage.src = "URL_spinner40.gif"; // imagen de carga
popBoxRevertImage = "URL_magminus.gif"; // imagen del cursor
popBoxPopImage = "URL_magplus.gif"; // imagen del cursor

popBoxRevertText = "Click para contraer la imagen."; // texto por defecto
popBoxPopText = "Click para expandir la imagen."; // texto por defecto
</script>

Hay otras variables que pueden consultarse en la documentación online.

También podríamos modificar las clases CSS ya que estas son opcionales:

<style type="text/css">
.PopBoxImageSmall {
border: none 0px white;
cursor: url("URL_magplusCUR.gif"), pointer;
}
.PopBoxImageLarge {
border: solid thin #CCCCFF;
cursor: url("URL_magminusCUR.gif"), pointer;
}
</style>

Aplicar los efectos es muy sencillo porque lo único que necesitamos es la etiqueta IMG a la que podemos agregarle algunos atributos especiales.

El código necesario para mostrar una imagen sin ningún otro tipo de agregado es el siguiente:

<img
src="URL_imagen"
class="PopBoxImageSmall"
style="width: anchoThumbnail; height: altoThumbnail;"
onclick="Pop(this,speed,'PopBoxImageLarge');"
pbshowrevertbar="false"
pbshowreverttext="false"
pbshowrevertimage="false" />

donde:

src es la imagen a mostrar
class es la clase CSS que usamos para mostrar un cursor diferente
style es el estilo CSS donde, en este caso, definimos el ancho y el alto de la miniatura
pbshowrevertbar, pbshowreverttext, pbshowrevertimage son atributos especiales que controlan los textos y pondremos en false para no utilizarlos

Por último, ejecutaremos el evento para ampliarla, en este caso onclick aunque también puede ser onmouseover. La función tiene esta sintaxis:

Pop(obj, speed, className)

donde:

obj es el objeto imagen (por defecto usamos la palabra this)
speed es la velocidad de apertura (un valor de 50 es un valor normal, cuanto más alto, más rápido)
className es el nombre de la clase CSS que se aplicará a la ventana o null

En el ejemplo:

onclick="Pop(this,50,'PopBoxImageLarge');"

Podemos utilizar una sola imagen y, en ese caso, establecemos el atributo style y definimos los valores de width y de height para mostrar una miniatura pero, lo razonable es utilizar dos imágenes diferentes, una miniatura y la imagen de tamaño natural para así aliviar la carga de la página.

La dirección URL que incluimos en el atributo src, será siempre la miniatura. Si son dos imágenes, la segunda imagen se agrrega en otro atributo especial:

pbSrc="URL_imagenNormal"

que, además tiene una segunda opción:

pbSrcNL="URL_imagenNormal"

similar al atributo anterior pero, fuerza a no precargar la imagen con la página sino hacerlo sólo cuando se haga click en ella.

Otros atributos:

pbCaption es optativo y se utiliza para mostrar algún texto en la parte inferior de la ventana generada. Si no lo definimos pero utilizamos el atributo title, será este el que se mostrará.

Como, por defecto, se coloca una barra horizontal en la parte superior y un texto en la parte inferior, podemos controlarlos con estos atributos:

pbShowRevertBar muestra u oculta la barra superior (false o true)
pbShowRevertText muestra u oculta el texto de la barra superior (false o true)
pbShowRevertImage muestra u oculta la imagen de la derecha de la barra superior (false o true)
pbRevertText el texto de la barra superior

pbShowCaption muestra u oculta la barra inferior (false o true)
pbCaption el texto de la barra inferior

Ver más detalles.

Hay muchas más posibilidades que pueden verse en la página de los autores donde hay abundante documentación. Por ejemplo:

onclick="PopEx(obj, newLeft, newTop, newWidth, newHeight, speed, className);"

es una función que permite establecer la posición y el tamaño de la imagen ampliada.

newLeft y newTop son parámetros que indicarán la posición relativa y pueden ser valores negativos o positivos (si queremos que sean valores absolutos, deberemos agregar la letra A al valor, por ejemplo, 200A)
newWidth y newHeight será el tamaño de la imagen ampliada, si es cero, se usará la imagen completa.

PopEx(this, -125, 60, 350, 220, 50, null)