How to create a JQuery Plugin

So I wanna start creating JQuery plugins and have already started to code one. I read the full article on JQuery com about how to create one, but Iäve got a problem which I can't find seem anywhere on the internet. The plugin should be run from an external script and should be called from a script within the HTML document like this:

<script type="text/javascript">
$(function() {
    $("#JwebImageGallery").JwebImageGallery({
        Delay: 1000
    })
})
</script>

First I tried to setup the ElementID from the options which worked just fine(which made the '("#JwebImageGallery")' useless). However that's not what I want. I want it to use the '("#JwebImageGallery")' as the ElementID that the plugin then will manipulate. In the tutorial on JQuery's website they said that you should use "this" which also was my first thought, however it doesn't work. Like I said I'm running it from an external ".js". When I alert "this" then it returns this: [ObjectHTMLDivElement]. The Element is a div so "this" seems to work, but then not work.

Here's a bit of my script:

(function( $ ) {
    $.fn.JwebImageGallery=function(o){
    o=$.extend({
        BoxID: 'JwebImageGallery',
        Delay: 5500,
        TransitionEffect: 'slide'},
    o||{});

    return this.each(function() { 

        var BoxID = this;
        window.alert(BoxID);

    // Script continues here
});

  };
})( jQuery );

I've also tried using without success:

var BoxID = $(this);

Why won't the "this" work? I've checked on many websites for any fault that I might have done but I just can't figure it out.

So how could I see that it didn't work? I'll put my code here:

$(BoxID).css('overflow', 'hidden');

This code worked just fine when the ElementID (BoxID) was set in the options, but when I changed it to "this" it just wouldn't work anymore... Also If I were to set BoxID to 'JwebDesignImageGallery' which is the ID then it works.

I'm new to JQuery so if anyone of you knows why the this doesn't work then can you please explain it to me and maybe other people too that might have the same problem? If you need more information, please let me know! Thanks in advance!

NOTE: I have included both JQuery and JQuery UI

EDIT

The ID I want to get is the one in this code:

$(function() {
        $("#JwebImageGallery").JwebImageGallery({
            Delay: 1000
        })
    })

I.e. "#JwebImageGallery". That's what I thought "this" would return.

Solution

Your confusion seems to arise from what this is. this represents a jQuery element. What tipped me off was the following lines in your code.

var BoxID = this;
window.alert(BoxID);

So to be super clear - this is not the ID of the element passed in. From their online docs (which are actually quite good)

Now that we have our shell we can start writing our actual plugin code. But before we do that, I'd like to say a word about context. In the immediate scope of the plugin function, the this keyword refers to the jQuery object the plugin was invoked on. This is a common slip up due to the fact that in other instances where jQuery accepts a callback, the this keyword refers to the native DOM element. This often leads to developers unnecessarily wrapping the this keyword (again) in the jQuery function.

If you want the id of the element passed in then all you need to use is the following.

var BoxID = this.prop('id');
window.alert(BoxID);

If you want to manipulate that element

this.animate({  }); //because this is already a jQuery object

Not

$(this).animate({}); //like you might see in a typical jQuery callback