Transiciones en las imágenes

En ajaxorized.com hay una pequeña librería que utiliza prototype y script.aculo.us para incluir transiciones en las imágenes de manera muy simple.

En este momento, el script posee nueve transiciones diferentes que funcionan tanto en Firefox como en Internet Explorer.

Primero que nada, descargamos el ZIP que nos proveen y que contiene un demo y todas las librerías necesarias

Si no las tenemos incluidas, agregamos las librerías a la plantilla, antes de </head>:

<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">

Si ya las tenemos en la plantilla, sólo debemos alojar el script transition.js en un servidor y lo cargamos agregándolo debajo de las anteriores:

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

Eso es todo, ahora, ya podemos usarla agregando el atributo rel a cualquier enlace e indicando el tipo de transición; por ejemplo, podemos poner una lista de imágenes, o una tabla:

<ul>
<li><a href="URL_image1" rel="transition[switchoff]">ENLACE 1</a></li>
<li><a href="URL_image2" rel="transition[slidedown]">ENLACE 2</a></li>
<li><a href="URL_image3" rel="transition[blinddown]">ENLACE 3</a></li>
<li><a href="URL_image4" rel="transition[slideright]">ENLACE 4</a></li>
<li><a href="URL_image5" rel="transition[appear]">ENLACE 5</a></li>
<li><a href="URL_image6" rel="transition[switch]">ENLACE 6</a></li>
<li><a href="URL_image7" rel="transition[blinddown]">ENLACE 7</a></li>
<li><a href="URL_image8" rel="transition[grow]">ENLACE 8</a></li>
<li><a href="URL_image9" rel="transition[shrink]">ENLACE 9</a></li>
</ul>>

Luego, donde deseamos que se muestre, creamos un bloque DIV que será el contenedor donde se verán las imágenes, que tendrá las propiedades CSS que nos gusten y donde, por defecto veremos la primera imagen de la serie:

<div id="nombre" style="propiedades">
<img src="URL_imagenInicial" />
</div>

Por último, debajo del DIV agregamos el script para crear la transición donde sólo necesitamos indicar el ID del DIV y la imagen inicial:

<script type="text/javascript">
laTransicion = new Transition('nombre','URL_imagenInicial');
</script>

Podemos agregar tantas galerías con transiciones como deseemos y serán independientes ya que a cada una de ellas la creamos indicando un ID diferente.

Lo que conviene es precargar las imágenes con anterioridad para evitar demoras (más información). Esto, lo hacemos agregando lo siguiente:

<script type="text/javascript">
var nombrePIC=new Array();
nombrePIC[0]=new Image(ancho,alto);
nombrePIC[0].src="direccion_URL_imagen_1";
nombrePIC[1]=new Image(ancho,alto);
nombrePIC[1].src="direccion_URL_imagen_2";
.............
</script>