Code for Begginners

lunes, 25 de agosto de 2008

Image Transitioner under Prototype and Scriptaculous

This is a simple class but it could also write as a pair of two functions but i think it is better to organize your code and this is an alternative but also to make code for reuse, ok but this is not the point, this is a class that receives as a parameters the id for the containers, probably if you use a css class, you could use containers=$(class_parameter) instead of use an array, but you should use $A($(class_parameter)) to have access to array functionalities, so i wrote this little code and i will explain just the lines that maybe a java, c# wont notice.

var ImageTransitioner = Class.create(); //Define our ImageTransitioner class :)
ImageTransitioner.prototype = { //using .prototype we are able to add members to our prototype object(class in java)

initialize:function(containers, delayTime){ // initialize as in java is the constructor

this.id_containers=containers; this.actual=0;
this.interval = setInterval(this.imageTransition.bind(this),delayTime);

//bind it is used to maintain the context, to our object context, so we will able to use this.whatever

},imageTransition:function(){
Effect.Fade(this.id_containers[this.actual], { duration:2, from:1.0, to:0.0 });
this.actual++;
if (this.actual >= this.id_containers.lenght) this.actual = 0;
Effect.Appear(this.id_containers[this.actual], { duration:2, from:0.0, to:1.0 });
}
};

//The combination effects Fade and appear gives you a simple but pretty effect when you use for a collection of images that changes in some sections.

var imageEffect = new ImageTransitioner(new Array('box-1', 'box-2', 'box-3', 'box-4'),8000);

And the Html looks like:

1







What i don't like, is that we use the inline style: 'display:none' so if you have any comments or questions, please let me know.

Etiquetas

Powered By Blogger