Cannot use "this" in plugin

Cannot use "this" in plugin

Hi,

I am trying to write a plugin but have problems using "this" as reference to the object for which the plugin was called.

My plugin looks like this:

jQuery.fn.fadeInImage = function()
{
    // for testing
    alert( this.src );

    this
        .hide()
        .load( function() { $(this).fadeIn(); } )
        .each( function() { if(this.complete) { $(this).trigger("load"); } } );
   
    return this;
};

This is embedded in the page as follows (picture.js is the file where the plugin code is stored):

<script type="text/javascript" src="js/picture.js"></script>
<script type="text/javascript">
    $('#pic_main').fadeInImage();
</script>

The plugin get's called allright, but "this" seems to be an empty object. It is of type "object" but all the fields (like .src) are "undefined". Also the subsequent calls to fade in the image do not have any effect.

The reference to pic_main should work because if I put the code directly to the page it works:

<script type="text/javascript">
     $('#pic_main')
         .hide()
         .load( function() { $(this).fadeIn(); } )
         .each( function() { if(this.complete) { $(this).trigger("load"); } } );
</script>;

I would appreciate any advise on what I am doing wrong.

Thanks, Robert