e24Squares - AJAX random squares image transition
Intro
e24Squares is an extension written for scriptaculous to make transitions between images with an original effect. This effect randomly generates squares that appear on different positions on the current image while the next image appears behind with a fade effect. The extension can be used as photo gallery, as slideshow, or as decorative animation in our web page.
Demos
Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24Squares after both:
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> |
Next, write the necessary HTML code to define the gallery. We will need a container layer (”visor” on the example) and inside the container we will have an image for the first image in the gallery. Example below:
1 2 3 4 | <!--e24Squares container --> <div id="visor" > <img src="img/liberty.jpg" alt="imagen 1" /></div> <!-- End of e24Squares container --> |
Finally, we write the necessary javascript code. As first param we will provide the container layer id (”visor”), and as second param an images filenames array and as the last one an option’s array.
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 } ); |
Options
- base: Relative path to the image directory. Default is the same directory as the web page
- width: Width in pixels for the gallery visor.
- height: Height in pixels for the gallery visor.
- rows: Rows quantity in which the effect will divide the visor to form the random squares. Default value: 3
- cols: Columns quantity in which the effect will divide the visor to form the random squares. Default value:5
- duration: Decimal, representing the time in seconds that each transition between the current image and the next one will take. Default value: 1.0
- interval: Decimal, representing the time in seconds that will take to begin the next image transition. Default value: 0.3
- color: Represents the random squares color. Default value: #ffffff
- autostart: Boolean, if set to “true” the animation starts automatically, if set to “false” then we will need to call start() method to initiate the animation or to call the transition() method to go to an specific image. Default value: “false”
- hideonfinish: Boolean, if set to “true” then the visor will be hidden after showed the last photo, else the last photo will keep visible. Valor por defecto: false
- callback: callback function that will be processed once the animation is complete. It is useful to concatenate animations.
Methods
- start: No params needed. Initiates the slideshow if the effect object was created with the autostart option set to “false”.
- transition((int)index, (function)pCallback): The first param is the picture index to show(the first is zero), the second param is a callback function that will be called once finished the transition.
1 | oe24Squares.transition(2); |
Known Issues
- Ability to make the slideshow to play infinitely.
Download
e24Squares 0.2 beta (218 KB, including the demos)
If you want to check what I am working on now, then follow me at 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….