iBox is built on it's plug-in handling. All document types that it handles by default are actually built as plug-ins. The default plug-in if nothing matches is the Document handler.
Creating your own plug-ins is simple, and requires very little JavaScript knowledge. The first thing you'll want to do is create a file to hold your plug-ins. This file must be loaded after ibox.js is loaded. After you've got a workspace available, let's go ahead and create the plug-in.
You will need to decide on a name, that doesn't conflict with any existing plug-in names. Default Plugin's are stored in a special namespace so you won't have to worry about that.
var iBoxPlugin_YouTube = function() {}
Now, you need to write your plug-in's match function, which is where we check the URL against something
else in order to verify if this plug-in should be used. This function is called match and one
argument, the url.
var _private = {
youtube_url:
/(?:http:\/\/)?(?:www\d*\.)?youtube\.com\/(?:v\/|(?:watch(?:\.php)?)?\?(?:.+&)?v=)([^&]+).*/
}
var _public = {
match: function(url)
{
return url.match(_private.youtube_url);
},
}
Once our matching works, we need to add the rendering code. This functions is called render
and has two arguments: url, and params.
render: function(url, params)
{
id = url.match(_private.youtube_url)[1];
params.width = 425;
var html = '<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/' +
id + '"></param><param name="wmode" value="transparent"></param><embed
src="http://www.youtube.com/v/' + id + '" type="application/x-shockwave-flash" wmode="transparent" width="425"
height="355"></embed></object>';
iBox.html(html, params);
}
Now that you've got your rendering and matching, all that's left is to register, via
iBox.plugins.register(function). Below is the full example including the registration code.
var iBoxPlugin_YouTube = function()
{
var _private = {
youtube_url:
/(?:http:\/\/)?(?:www\d*\.)?youtube\.com\/(?:v\/|(?:watch(?:\.php)?)?\?(?:.+&)?v=)([^&]+).*/
}
var _public = {
match: function(url)
{
return url.match(_private.youtube_url);
},
render: function(url, params)
{
id = url.match(_private.youtube_url)[1];
params.width = 425;
var html = '<object width="425" height="355"><param name="movie"
value="http://www.youtube.com/v/' + id + '"></param><param name="wmode"
value="transparent"></param><embed src="http://www.youtube.com/v/' + id + '"
type="application/x-shockwave-flash" wmode="transparent" width="425"
height="355"></embed></object>';
iBox.html(html, params);
}
}
return _public;
}();
iBox.plugins.register(iBoxPlugin_YouTube);
There is now an unload function available on plug-ins. This is called when the plug-in is
unloaded.
One of the common variables you'll see passed around is our params object. This contains
all of the currently active options and parameters. These are set initially, but may be overwritten inside of
your plug-in. Below are some common parameters.
''trueiBox.fade_in_speed option set to 0.
trueiBox.default_widthnulliBox allows you to bind to certain events, just as you would to normal events in your document, using
the iBox.addEvent(event_name, object, callback) method. This method can also be used to bind to
general events in your document. iBox currently consists of a few events on the object itself: