e24Squares - Efecto AJAX de transición de imágenes
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
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:
1 2 3 | <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.
1 2 3 4 5 | <!--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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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.
1 | 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)
Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24
Comentarios
[...] e24Squares es un efecto creado con scriptaculous para que uses con las imágenes de tu sitio web. La idea es que la transición se da por medio de una serie de cuadros que van apareciendo en forma aleatoria hasta que aparece la nueva imagen que reemplaza la anterior. [...]
Un gran efecto, sin embargo no logro hacer la transicion desde cualqueira de las fotos a la primera. Un bug?
Saludos
[...] las necesitemos en cualquiera de nuestros proyectos web. Para mayor información no dejen de leer el articulo que explica su uso y que nos da los enlaces de [...]
[...] que seguís de cerca nuestro blog notarán enseguida que el protagonista de la página es e24Squares, el efecto galería de bloques aleatorios que publicamos en posts anteriores. Este efecto está integrado de manera que cada página del [...]
Nice script but in the “manual transition” example the first button does not load the first image (index [0]), and I can not eliminate this small bug.
Any idea?
No funciona en IE. Se queda al principio todo en blanco y repite transiciones. Si alguien conoce cómo arreglarlo por favor que me escriba a abejareina81@hotmail.com, muchas gracias.
Hola quiero implementar el e24squares en mi nueva pagina pero quisiera que dicho efecto se reproduciera n veces sin necesidad de refrescar la ventana, es decir, que se ejecute automaticamente al llegar a la ultima imagen, me podrian decir como lo puedo hacer por favor, y sino se puede hacer hay otra libreria parecida a esta que si lo haga
Gracias
Hola a todos! he probado este script y es muy bueno para firefox, pero en los internet explorer no funciona… alguien tiene alguna solucion para que este script sea cross broswer?
Where can I place the Callback function?
Event.onDOMReady(function() {
oe24Squares = new e24Squares(’visor’,
[ 'liberty.jpg', 'newyork2.jpg', 'mexico.jpg', 'newyork.jpg' ],
{
base: ‘images/square_container/’,
width: 640,
height: 249,
rows: 3,
cols: 5,
hideonfinish: true,
autostart: true,
duration: 1.0,
interval: 1.0,
callback: 2
}
);
});
This won’t work.
Thanks
Hola, probe el script pero le encontre dos problemas.
El primero no se como hacer para que se repita el efecto una ves terminado.
El segundo no funciona bien en Internet Explorer.
Si alguien tiene soluciones les agradezco.
Saludos!!!
Hola Sres….
para el problema de regresar a la primera imagen.. ps una solucion que me facilito la existencia fu el colocar un reload(); en el link para que cargue de nuevo la primera diapositiva… esto es mas util utilizando iframe ya que esto haria que solo cargue el marco y no toda la pagina….
dejo aki el ejemplo:
insisto!! es una solucion vaga que me facilito a mi mucho mucho..
ahora con el problema del explorer lo que veo es que carga la ultima imagen y no la primera… bno este no lo solucione.. a los usuarios de explorer pss que tengan paciencia en mi web…
espero ayude de algo!!
jajaja.
bno la cosa es que ponen en el div de “navbar” en el primer link (osea el 1) agregan esto: onclick=”location.reload();”
Hola, saben si cuando pasa alguna imagen puedes darle el valor de Link para que te mande a alguna direccion dentro del sitio???
Gracias
La verdad es que funciona con explorer 8 de perlas + que bien
Pero yo quiero poder agragar botones pause, pare, continue alguien sabe como?
Apesar que nadie contesta las preguntas, me atrevo a preguntarles… saben como se puede desarrollar esto en jquery o si existe algun plugin?? es que scriptaculous es demasiado pesado .
Un efecto realmente perfecto, justo lo que buscaba. Es una auténtica pena que no funcione en IE…¿Alguien sabe como hacer que funcione esto en explorer? Saludos y gracias de antemano
How do I make the loading text or animation appear for 0.5 seconds between each image transition ? I know this is dumb coz the images are loaded already. But I have a cool animation to add in between. Anyone have an idea of putting it inside the js ??
AJAX24 nos trae una nueva Galeria de imagenes AJAX…
AJAX24 nos trae una galeria de fotos AJAX con un efecto de transición original. La galería puede descargarse gratuitamente desde AJAX24….