I have the following problem:
I am creating a simple plugin jquery carousel, to animate images within a box.
But I came across the following problem, using OO to build the plugin, I refer to my object using this.
But one of the functions use the animate method of jquery.
And I want to do this in a recursive way. Because animation is a constant.
But in the callback function jquery animate, this refers to the object animation, and not my object created in the execution of the plugin itself.
How can I call the function callback object in the animation?
I try resolve calling the function run() directly before animation line code, but i get the error:Uncaught RangeError: Maximum call stack size exceeded
if i put the run function in animation callback, i got other error:
this.wraper.animate(
{top : '-='+image_height},
this.config.speed,
this.run()
)
or
this.wraper.animate(
{top : '-='+image_height},
this.config.speed,
function(){
this.run();
}
)
because this is reference to this.wraper object, and not to function object
seems kind of confusing to explain.
Here is the code:
(function($){
carouselClass = function (el, opts) {
this.id = $(el).attr("id");
this.i = 0;
this.config = opts;
this.wraper;
this.count = 0;
this.flag = true;
this.init = function() {
// variables
var img = $("#"+this.id).find("img");
this.count = img.length;
//adiciona css necessário a div wrapper
$("#"+this.id).css("position","relative");
$("#"+this.id).css("overflow","hidden");
$("#"+this.id).append("<div></div>");
this.wraper = $("#"+this.id).find("div");
//definições css da div wrapper
this.wraper.css("position","absolute");
this.wraper.css("right","0px");
var direction = this.config.direction;
var container = this.wraper;
//adiciona as imagens ao novo container
img.each(function(){
if(direction == "left" || direction == "right")
$(this).css("float", direction)
$(this).css("display", "block");
container.append($(this));
});
//seta a largura e altura do wraper conforme a direção
if(direction == "left" || direction == "right")
{
this.wraper.width((img.width()*this.count));
this.wraper.height(img.height());
}
else
{
this.wraper.height((img.height()*this.count));
this.wraper.width(img.width());
}
this.run();
}
this.run = function()
{
if(this.config.direction == "top")
{
height = this.wraper.height();
image_height = height/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{top : '-='+image_height},
this.config.speed
)
}
this.wraper.animate(
{top:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
if(this.config.direction == "bottom")
{
height = this.wraper.height();
image_height = height/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{bottom : '-='+image_height},
this.config.speed
)
}
this.wraper.animate(
{bottom:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
if(this.config.direction == "left")
{
width = this.wraper.width();
image_width = width/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{left : '-='+image_width},
this.config.speed
)
}
this.wraper.animate(
{left:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
if(this.config.direction == "right")
{
width = this.wraper.width();
image_width = width/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{right : '-='+image_width},
this.config.speed
)
}
this.wraper.animate(
{right:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
}
};
$.fn.carousel = function(options)
{
var opts = $.extend({}, $.fn.carousel.defaults, options);
return this.each(function () {
var instance = new carouselClass($(this), opts);
/**********Start the carousel ***********/
instance.init();
});
$.fn.carousel.defaults = {
'direction': "left",
'speed': 3000
};
}
})(jQuery);
if i call in this way, plugin work´s, but only the number of times that I set to i var, and I wish that carousel changing continuously:
this.prepare = function()
{
this.i++;
if(this.i < 3)
{
this.run();
}
}
this.run = function()
{
if(this.config.direction == "top")
{
height = this.wraper.height();
image_height = height/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{top : '-='+image_height},
this.config.speed
)
}
this.wraper.animate(
{top:'0px'},
this.config.speed
);
this.prepare();
}
}
Are you looking for something like this?