Last time I gave the contents for dfacebox.info file so today we'll concentrate more on dfacebox.module. The first thing we need to do is to define a constant MODULE_PATH which holds the path to our module, this way we could access our module's path easily.

Noticed we don't have a closing php delimiter, this is one of best practices in Drupal's module development. drupal_get_path is just a function to retrieve a path, here we're telling it to get the path to a module named dfacebox (our module). With our path set, the next thing is to use drupal's hook_init. When your Drupal site loads, several events happen while the page you're requesting gets constructed. Hooks is just a way to tap in the process and act accordingly, hook_init is something that gets called at the beginning of each page request. You can look for hooks on particular Drupal version at Drupal's API.

/**
 * Implementation of hook_init()
 */
function dfacebox_init() {
  drupal_add_js(
    array('baseUrl'      => $GLOBALS['base_url'],
          'dfaceboxPath' => MODULE_PATH),
    'setting'
  );
  drupal_add_css(MODULE_PATH .'/facebox/facebox.css');
  drupal_add_js (MODULE_PATH .'/facebox/facebox.js');
  drupal_add_css(MODULE_PATH .'/css/common.css');
  drupal_add_js (MODULE_PATH .'/js/common.js');
}

To use hooks, you substitute the word hook with your module's name so hook_init becomes dfacebox_init since dfacebox is the name of our module. Notice the comment just before our function definition, this is one of Drupal's best practices so it'll be easy to identify hooks. The sole purpose of our hook_init is to add the required stylesheets and javascript files, we use drupal_add_css and drupal_add_js to add styles and javascripts respectively.

All of our drupal_add_css simply accepts the path to our required css files by concatenating the constant path that we declared later with the relative path to the file itself from our module's folder, this is the same with drupal_add_js except for the first one. The first one doesn't reference a file but instead we set some settings that contains our module's path and our site's base url, anything that needs to be accessible as a setting are passed as an associative array and we also add the optional second parameter to drupal_add_js with the value 'setting'. We can then simply call this settings base on its key as a normal javascript variable later.

If you're keen, you'll notice we haven't actually created common.css and common.js so lets create that now. Under our module's folder, create the folders js and css and put the common.css inside css and common.js inside js folder. We'll look at common.css first:

#facebox tbody { border-top: none !important; }

This is just a simple style to override Drupal's style that adds a horizontal border at the top of facebox when I was testing it. And for the common.js:

if (Drupal.jsEnabled) {
  $(document).ready(function() {
    var base_url = Drupal.settings.baseUrl + '/';
    var dfacebox_path = base_url + Drupal.settings.dfaceboxPath + '/facebox/';
    $.facebox.settings.loadingImage = dfacebox_path + 'loading.gif';
    $.facebox.settings.closeImage = dfacebox_path + 'closelabel.gif';
    $('a[rel*=facebox]').facebox();
  });
}

Here we check to see if javascript is enabled by calling the jsEnabled method of our Drupal object that ships with Drupal for free. The body of this condition should be familiar if you already know JQuery, the $(document).ready(); function is something that gets triggered when the Document Object Model (DOM) gets loaded. We pass it an inline function that overrides the default paths to the loading and close images of facebox, notice how we conveniently call Drupal.settings.baseUrl and Drupal.settings.dfaceboxPath which are the associative array we passed from our hook_init.

In my next post, we will actually look at the wrapper function for Drupal's l function and hopefully finish the module.