Introducción

e24Squares es una extensión para scriptaculous que permite hacer transiciones entre imágenes con un efecto original. Este efecto genera una serie de cuadros blancos que van apareciendo de forma aleatoria en diferentes posiciones mientras la siguiente imagen va apareciendo detrás con un efecto de opacidad o fade. La extensión puede ser usada como galería de fotos o como un efecto decorativo en nuestra página web.

Demos

• Transiciones Manuales
• Reproducción automática

¿Cómo utilizarlo?

Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro del header del código HTML de la página. Incluya e24Squares después de ambos:

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

Ahora escriba el código HTML necesario para definir la galería. Necesitaremos una capa contenedora (“visor” en el ejemplo) y dentro de la capa contenedora pondremos una imagen que será la que aparezca inicialmente antes de comenzar el efecto.

<!--e24Squares container -->
<div id="visor" >
	<img src="img/liberty.jpg" alt="imagen 1" />
</div>
<!-- End of e24Squares container -->

Ahora veremos el código javascript necesario para el funcionamiento del efecto, donde pasaremos como primer parámetro el id de la capa contenedora de la galería “visor”, como segundo parámetro pasaremos un array con los nombres de los archivos de las imágenes y por último un array de parámetros para el efecto.

oe24Squares = new e24Squares( 'visor', 
			    [ 'liberty.jpg', 'newyork2.jpg', 'mexico.jpg', 'newyork.jpg' ],
				{ 
					base: 'img/', 
					width: 640, 
					height: 300, 
					rows: 3, 
					cols: 5, 
					hideonfinish: true, 
					autostart: true, 
					duration: 1.0, 
					interval: 1.0 
				}
			);

Todas las Opciones

• base: El camino donde se encuentran las imágenes.
• width: Ancho en pixeles del visor de la galería.
• height: Alto en pixeles del visor de la galería.
• rows: Cantidad de filas en que se dividirá el visor para formar los cuadros de la transición. Valor por defecto: 3
• cols: Cantidad de columnas en que se dividirá el visor para formar los cuadros de la transición. Valor por defecto: 5
• duration: Un valor decimal que representa el tiempo en segundos que durará la transición entre una foto y la siguiente. Valor por defecto: 1.0
• interval: Un valor decimal que representa el tiempo en segundos que tardará en comenzar la siguiente transición. Valor por defecto: 0.3
• color: Representa el color de los cuadros que aparecerán en el efecto. Valor por defecto: #ffffff
• autostart: Un valor booleano, si es true la animación se inicia automáticamente, si es false necesitaremos llamar al método start() para iniciar la reproducción automática o llamar al método transition() para ir a una imagen determinada. Valor por defecto: false
• hideonfinish: Un valor booleano, si es true el visor se ocultará cuando llegue a la última foto, si es false la última foto permanecerá visible. Valor por defecto: false
• callback: función que se llamará cuando se complete la última transición, útil para concatenar con otro efecto.

Métodos

• start: No requiere parámetros, inicia la animación si el efecto se creó con el parámetro autostart como false.
• transition((int)index, (function)pCallback): Recibe como primer parámetro el índice de la imagen a mostrar(la primera es 0), el segundo parámetro es una función que se llamará cuando termine la transición por si se necesita concatenar con otra acción.

oe24Squares.transition(2);

Errores conocidos y cosas por hacer

• Permitir que la reproducción automática comience por el primero cuando llegue al final.

Descargar

e24Squares 0.2 beta (218 KB, incluye los demos)

Esta entrada fue publicada el Domingo, 4 de Mayo, 2008 a las 6:49 pm categorizada como Galería, General, Javascript, Prototype, Scriptaculous, Animaciones, Efectos. Usted puede seguir las respuestas a esta entrada a través del feed RSS 2.0. Puede dejar un comentario, o enlazarlo desde su propio sitio.