Importing and using overlay from jquery_plugin module

Question

I am trying (and failing) to use the jquery overlay plugin from the jquery_plugin module in Drupal 7.

I am using drupal_add_library() to add the plugin and drupal_add_js to add the code to generate the overlays.

The overlay trigger elements are area elements within a map.

Whenever I try and trigger the overlays, I get nothing - no errors or stacktraces or alerts, or messages in Firebug.

Here is the code - added directly into the page content.

drupal_add_library('jquery_plugin', 'overlay');
drupal_add_js('function($) {
    $(document).ready( function() {
        $(".overlayarea").overlay();
    });
}(jQuery); ','inline');

The map looks as the following:

<map name="globalmap">
    <area id="toronto" class="overlayarea" alt="Toronto" coords="94,195,6" shape="circle" rel="#tor_overlay" nohref />
    <area id="oxford" class="overlayarea" alt="Oxford" coords="576,147,6" shape="circle" rel="#oxf_overlay" nohref />
</map>

Answer 1

Actually this module seems to be abandoned. Using drupal_add_library() works only if the module used hook_library(). I wanted to check it in the repository of jquery_plugin, but these files aren't available. I don't know why.

If you want to use overlays, you can use directly the jQuery UI that is already included in Drupal 7.

Answer 2

I fixed this by using the Colorbox module and the Imagemap plugin for TinyMCE. Adding class="colorbox' to the map area allowed me to use an overlay for that area.

Answer 3

I'm not familiar with using the jQuery plugin module; personally I simply add whatever I need to my theme.info file.

    scripts[] = js/jquery-tools1.42/jquery.tools.min.js

Then overlays are available sitewide.