Wednesday, January 28, 2009

[jQuery] function in plugin not running

I tried to debug my first attempt to write a JQuery Plugin, and found
out that none of the functions inside my plugin-attempt are executed.
Looks like this:

$.fn.galletri = function(){
console.log("inside galletri1");
TNL = $(this);
return this.each(function(){
console.log("inside galletri2");
$(TNL + " a").fadeTo(0, 0.4);
$(TNL + " a").hover(function(){
$(this).stop().fadeTo(100, 1);
},
function(){
$(this).fadeTo(100, 0.4);});

$(TNL + " a").click(function(){
console.log("inside click");
ManageClick($(this).attr("Picture1"), $(this).attr("Picture2"), $
(this).attr("Picture3"), $(this).attr("title"));
return false;
});

function ManageClick(src1, src2, src3, text){
$("#Picture2").addClass("loading");
$("#PictureDesc").fadeOut(300, function(){
$(this).html('<p>' + text + '</p>').fadeIn(400);
});
NewPic("#Picture1", src1, 400);
NewPic("#Picture2", src2, 800);
NewPic("#Picture3", src3, 1200);

}
function NewPic(id, src, fadeTime){
pic = $(id + " img");
pic.stop();
if(pic.length){
$(id).append("<p id='fill'>&nbsp;</p>");
pic.fadeOut(300).remove();
}
if(src != ""){
var largeImage = new Image();
$(largeImage).attr("src", src)
.load(function()
{
$(largeImage).hide();
$("#Picture2").removeClass("loading");
$(id).append(largeImage);
$(largeImage).fadeIn(fadeTime);
$("#fill").remove();
});
}}
$(TNL + " a:first").click();
});};


The console messages are:
inside galletri1
galletri forsoeg

No comments: