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

• Manual Transitions
• Slideshow

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.