AJAX24 » e24Squares - AJAX Pictures transition effect

e24Squares - AJAX Pictures transition effect

Intro

e24Squares - Galeria de fotos 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

Usage

Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24Squares after both:

<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:

<!--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.

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.

oe24Squares.transition(2);

Known Issues

Ability to make the slideshow to play infinitely.

Download

e24Squares 0.2 beta (218 KB, including the demos)

Esta entrada fue publicada el Sunday, 4 de May, 2008 a las 6:49 pm categorizada como Galería, General, Javascript, Prototype, Scriptaculous, Animations, Effects. 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.

16 Respuestas para “e24Squares - AJAX Pictures transition effect”

webeame.net Dice:
5 de May, 2008 a las 1:13 pm
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….
e24Squares: trancisión en Ajax para la imágenes de tu galería Dice:
7 de May, 2008 a las 9:57 pm
[…] 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. […]
i5Js Dice:
2 de July, 2008 a las 2:42 pm
Un gran efecto, sin embargo no logro hacer la transicion desde cualqueira de las fotos a la primera. Un bug?

Saludos
e24Squares, efecto AJAX de transición de imágenes | Data2max.com Dice:
22 de July, 2008 a las 7:41 pm
[…] 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 […]
AJAX24 » Monperla.es – Web totalmente Ajax desarrollada con prototype y scriptaculous Dice:
2 de August, 2008 a las 8:31 pm
[…] 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 […]
Buribus Dice:
7 de August, 2008 a las 4:33 pm
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?
polodnata Dice:
18 de August, 2008 a las 8:42 am
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.
Ben Nosuke Dice:
21 de August, 2008 a las 7:03 am
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
Alvaro Araujo Dice:
21 de August, 2008 a las 6:58 pm
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?
Derek Dice:
2 de September, 2008 a las 3:02 pm
I disagree
Can you give more info?
chinaman Dice:
18 de September, 2008 a las 2:44 am
Hi
You shoud be the journalist with your great talent
Inside Dice:
3 de October, 2008 a las 1:21 pm
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
Ignacio Garcia Dice:
19 de October, 2008 a las 10:14 pm
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!!!
winlolo Dice:
17 de November, 2008 a las 5:41 pm
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:

1
2
3
4

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!!
winlolo Dice:
17 de November, 2008 a las 5:43 pm
oops… no se mira el codigo… voy a tratar de ponerlo nuevamente…

1
2
3
4
winlolo Dice:
17 de November, 2008 a las 5:45 pm
jajaja.
bno la cosa es que ponen en el div de “navbar” en el primer link (osea el 1) agregan esto: onclick=”location.reload();”

e24Squares - AJAX Pictures transition effect

16 Respuestas para “e24Squares - AJAX Pictures transition effect”

Dejar un Comentario

Páginas

Archivo

Categorías