Help turn jQuery script into a plugin

Question

Easy all

Since I studied jQuery recently, I decided to write my own modal window for playing videos when a video thumbnail is clicked. Everything works fine, but I'm just wondering how I can turn it into a plugin so that I can use it on different pages with different parameters, etc. I read the documentation and some manuals, but I can't seem to get it to work. My main code is as follows:

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){

    // Add our click OPEN event
    $j("a.video_link").click(function (e) {
        e.preventDefault();
        // Add our overlay div
        $j('body').append('<div id="overlay" />');
        // Fade in overlay
        $j('#overlay').css({"display":"block","opacity":"0"}).animate({"opacity":"0.2"}, 300),
        // Animate our modal window into view
        $j('#video').css({"top":"43%"}).css({"opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 550),
        // Add our close image
        $j('#video').append('<div id="modal-vid-close" title="Close window" />');
        // Add our click CLOSE event
        $j('#overlay, #modal-vid-close').click(function () {
            //Animate our modal window out of view
            $j('#video').animate({"top": "55%", "opacity": "0"}, 350).fadeOut(200),
            // Fade out and remove our overlay
            $j('#overlay').fadeOut(200, function () { $j(this).remove(); $j('#modal-vid-close').remove()} )
        });
    });
});

I would like to turn this into a plugin so that I can use it on different pages, and just specify the trigger link and div identifier that will be displayed in the window (it will already be loaded on the page, but hidden). Something like this added to the loading of the document on each page:

var trigger = $j('.video_container a');
var modalcontent = $j('#video');

, , !

Answer 1

, , Queness:

(function($){
    $.fn.extend({
        // change 'pluginname' to your plugin name (duh)
        pluginname: function(options) {

            // options for the plugin
            var defaults = {
                width: 500,
                height: 300
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                // main code goes here, will apply to each element of $(this)
                // e.g. `$(this).click( function() {} )`
                // also have access to `options` i.e. `options.width`
            });
        }
    });
})(jQuery);

HTML:

<script type="text/javascript">
$(document).ready( function() {
    // use default options
    $('.selector').pluginname();
    // custom options
    $('.selector').pluginname({width:300, height:200});
});
</script>

Answer 2

jQuery, Learning jQuery, , .

Answer 3

, Queness, 99%! . , , . "" - ? :

<script type="text/javascript">
(function($){
$.fn.extend({
    mynewmodal: function(options) {

   var defaults = {
                   container: "#modalcontainer"
          };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var o =options;
            // Add our click OPEN event
            $(this).click(function (e) {
                e.preventDefault();
                // Add our overlay div
                $('body').append('<div id="overlay" />');
                // Fade in overlay
                $('#overlay').css({"display":"block","opacity":"0"}).animate({"opacity":"0.2"}, 300),
                // Animate our modal window into view
                $(o.container).css({"top":"43%", "opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 550),
                // Add our close image
                $(o.container).append('<div id="modal-vid-close" title="Close window" />');
                // Add our click CLOSE event
                $('#overlay', '#modal-vid-close').click(function () {
                    //Animate our modal window out of view
                    $(o.container).animate({"top": "55%", "opacity": "0"}, 350).fadeOut(200),
                    // Fade out and remove our overlay 
                    $('#overlay').fadeOut(200, function () { $(this).remove(); $('#modal-vid-close').remove()} )
                });
            });
        });
    }
});
})(jQuery);
</script>

:

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready( function() {
$j('.video_container a').mynewmodal({ container: "#video" });
});
</script>