How can I use $(this) inside of Fancybox's onComplete event?

Question

I'm trying to use jQuery's $(this) inside of Fancybox's onComplete event, but I'm running into trouble. Here's my javascript code:

$('a.iframe').fancybox({  
  centerOnScroll: true,  
  onComplete: function(){  
    var self = $(this);  
    var title = self.title;  
    alert(title.text());  
  }  
});

I have simplified the code above to get my point across, but I actually would love to use $(this) for several reasons that I won't go into here.

Fancybox's documentation shows examples of using this instead of $(this)within its documentation, but I didn't see any examples where either were used inside of onComplete or other events. I of course tried using this, much to no avail.

Does anyone know how I can reference the triggered a.iframe element by using $(this) or any other means within the onComplete event?

Edit: I got this to work using Blackcoat's suggestion, and here's the final syntax that worked:

$('a.iframe').fancybox({
  centerOnScroll: true,
  onComplete: function( links, index ){
    var self = $(links[index]);  
    var title = self.find('.title').text();  
    alert(title); 
   }
});

Answer 1

Bitmanic,

Sadly, you're out of luck using this, but you can still reference the current link. Define your callback to accept an array of links selected by jQuery as its first parameter, and an index as the second parameter:

  $('a.iframe').fancybox({  
    centerOnScroll: true,  
    onComplete: function( links, index ){  
      var self = $(links[index]);  
      var title = self.title;  
      alert(title.text());  
    }  
  });

Here's how Fancybox invokes the onComplete hander:

if ($.isFunction(currentOpts.onComplete)) {
    currentOpts.onComplete(currentArray, currentIndex, currentOpts);
}

They aren't using Javascript's call or apply to invoke this function as a method of an object. In other words, this will refer to the global scope of your application (i.e. the document object), so you can't use it to refer back to the object being acted upon (shame on them). Instead, they pass three parameters to the callback for specifying context: currentArray (the selected object), currentIndex, and currentOpts.

Answer 2

Doing something like this should work:

var $trigger = $('a.iframe');
$trigger.fancybox({  
    centerOnScroll: true,  
    onComplete: function(){  
        alert($trigger.attr('title'));  
    }  
});

By storing $('a.iframe') in a local variable you can access it inside your onComplete callback function. Or, to put it another way:

...inner functions are allowed access to all of the local variables, parameters and declared inner functions within their outer function(s). A closure is formed when one of those inner functions is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned. At which point it still has access to the local variables, parameters and inner function declarations of its outer function. Those local variables, parameter and function declarations (initially) have the values that they had when the outer function returned and may be interacted with by the inner function.