Question

Easy All

As I’ve been learning jQuery lately, I decided to write my own modal window to play videos in, when the video thumbnail is clicked. It all works fine, but I’m just wondering how could I turn it into a plugin, so I could use it on different pages with different parameters etc. I read the documentation, and a few tutorials, but I can’t seem to get it working. My basic 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’d like to turn this into a plugin so I can use it on different pages, and just specify the ‘trigger’ link, and the div id to show in the window (it will already be loaded on the page, but hidden). Something like this, added to doc load on each page:

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

Any help, or pointers to good tutorials, much appreciated!

Answer 1

Here’s a good template, which I found on a tutorial site, 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);

Then put this in your HTML:

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