Tomorrow again: Otra galería experimental

Tomorrow again es el primer script de dhteumeuleu que vi y es uno de esos hallazgos de Gem@ que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.

Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador.

¿Qué se necesita hacer?

Primero que nada el script que, podemos agregarlo directamente en una entrada:

<script type='text/javascript' src='URL_tomorrowagain.js' ><script>

O podemos agregarlo a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí copiamos y pegamos el contenido del archivo tomorrowagain.js ...
//]]>
</script>

Luego, el CSS con estas definiciones mínimas:

<style type='text/css'>
#screen { /* el contenedor */
margin: 0 auto;
overflow: hidden;
/* el ancho y el alto debemos calcularo en funcíon del tamaño definido en panel */
height: VALORpx;
width: VALORpx;
}

/* las imágenes */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* este es el ancho y el alto de cada cuadrado donde se producirá el efecto */
height: VALORpx; 
width: VALORpx;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* la  imagen que veremos debajo */
#imagenREAL {
display:block;
margin:0 auto;
/* si no queremos limitar el tamaño de las imágenes, eliminamos esto */
max-height: VALORpx;
max-width: VALORpx;
}
</style>

En el ejemplo a descargar hay otras propiedades agregadas, bordes, colores, sombras, efectos varios que son personales y que pueden ser definidos a gusto y piacere de cada uno.

Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:

<div id="screen">
<img class="panel" src="URL_imagen1">
<img class="panel" src="URL_imagen2">
<!-- y seguimos agregando etiquetas IMG con todas las que se nos ocurra mostrar -->
</div>
<img id="imagenREAL" src="URL_imagen1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>

Como se ve, sólo es un DIV donde agregamos etiquetas IMG con la clase panel. Debajo, he puesto otra imagen extra con un ID específico y es allí donde se mostrará la imagen original cuando hagamos click sobre alguna de las miniaturas.

El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.

El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.