Fancy Transitions con jQuery

jqFancyTransitions es un plugin para jQuery que permite crear una galería de imágenes con diferente efectos de transición entre ellas.

Para utilizarla debemos tener jQuery en al plantilla así que, si no la tenemos, antes de </head> agregamos la librería directamenete desde Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

y debajo, el plugin, ya sea cargándolo desde un servidor donde previamente lo hayamos alojado:

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

o copiando y pegando el código y colocándolo entre etiquetas:

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

No hace falta nada más; ahora, para utilizarla, tenemos varias alternativas que podemos ver explicadas en la página de los desarrolladores pero, lo más simple es colocar las imágenes en un DIV de este modo:

<div id="migaleria">
<img src="URL_imagen1" />
<img src="URL_imagen2" />
<img src="URL_imagen3" />
... y seguimos agregando tantas imágenes como se nos ocurra ...
</div>

Luego, llamamos a la función:

<script> $('#migaleria').jqFancyTransitions({ opciones }); </script>

Podemos tener varias galerías en la misma página, cada una, identificada por un atributo ID diferente (en este ejemplo migaleria) y las opciones son parámetros que se agregan separados por comas:

width y height establecen el tamaño
effect es el tipo de transición y puede ser wave, zipper o curtain
position es la posición desde donde se iniciará la transción y puede ser alternate, top, bottom, alternate o curtain
direction es la dirección de la transción y puede ser fountainAlternate, left, right, alternate, random o fountain
delay es el tiempo que permanece la imaegn visible (por defecto 5000 o sea 5 segundo)
strips es un número que indica la cantidad de "pedazos" en que se desompone la imagen (por defecto 20)
stripDelay es el tiempo que permanece visible cada "pedazo" (por defecto 50)

Otras opciones permiten controlar los textos que pueden agregarse a las imágenes, colocándolos en el atributo alt:

<img src="URL_imagen1" alt="texto a mostrar" />

titleOpacity indica la opacidad de ese texto
titleSpeed es el tiempo que tarda en ser mostrado

Como alternativa, en lugar de imágenes podemos utilizar enlaces

<a href="URL_imagen1" />

En ese caso, las opciones son dos:

navigation puede ser true o false y agrega botones de navegación
links puede ser true o false para establecer si las imágenes son enlaces o no

En este ejemplo, las opciones utilizadas son las más simples así que la función es llamada de este manera:

<script> $('#migaleria').jqFancyTransitions({ width: 640, height: 400,direction: 'random',delay: 2000, effect: 'wave' }); </script>