How to add Jquery plugin to Drupal?

Question

Should I just paste the code in the main template file, or is there any other recommended way of attaching new Jquery plugins in Drupal 7?

Answer 1

The easiest way is just to add it on your theme's .info file:

scripts[] = js/my_jquery_plugin.js

The only exception is if you are adding an external resource (CDN/hosted script), in which case you should use drupal_add_js(), as explained by Jamie Hollern

Answer 2

Drupal has Jquery packaged with it.

To add a js file you can use drupal_add_js in the way descibed in other posts.

This will work in simple cases, but if you start to have plugins which depend on other plugins. you may want to look at the libraries api. I expect in time modules will be created to support popular libraries, there are some for JQuery ui built in see system_library().

In this example to inclued the jQuery ui.accordion module you can use drupal_add_library()

drupal_add_library('system', 'ui.accordion');

This will make sure the js is included along with the CSS and any libraries which depend upon it. It will also make sure that the libraries are only included once.

If you say which library you are using I can provide sample code for how to define it

So first create a module to define the library (call it qtip) and upload the module to a js folder underneath the module folder

then implement hook_library()

function qtip_library() (
 $libraries['qTip'] = array(
    'title' => 'qTip', 
    'website' => 'http://craigsworks.com/projects/qtip/docs/', 
    'version' => '1.0.0-rc3', 
    'js' => array(
      drupal_get_path('module', 'qtip') . '/js/jquery.qtip-1.0.0.min.js' => array(),
    ),
    'dependencies' => array(
      array('system', 'jquery'),
    ),
  );
  return $libraries;
}

Then to add the file put in your code

drupal_add_library('qtip', 'qtip');

This may be overkill for a simple library but if you have to manage a large number of libraries over multiple sites and themes it does make life much easier.

Answer 3

If you want to load script only on some pages (not all) you can add it trough your template.php file. Just add code similar to this:

function YourTheme_preprocess_node(&$variables) {

 $node = $variables['node'];
if (!empty($node) && ($node->nid == 983)
 // here you can esily add more pages
) {

drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.core.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/jquery-ui-1.7.3.custom.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.progressbar.js');

drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.progressbar.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.core.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.theme.css');
 }
}

I only tested this in Drupal 6.

Answer 4

You can add a JavaScript file to the theme you use in the Drupal site, by adding a script[] = line in the .info file of the theme you are using. I would consider this case only if you are using a customized theme, or a modified version of an existing theme that has been renamed; I would not suggest to do it if you are using, for example, Garland. Doing it in such cases would mean to lose all changes all times the theme is updated, or to copy the updated theme files, and then re-apply the same changes applied to the previous version of the files; if the change is only adding a script[] line, then the change is minimal, and it could be worth doing it, but it would also mean the JavaScript files are not added in the directory containing the theme files, or you should add the JavaScript files every time the theme is updated.

As alternative, you can create a custom module, or add code to an existing custom module you are already using for that site.
The pro is that the JavaScript files would be added to every theme is set as default, or administration theme, without the need to change all the themes that are enabled on the site, and that users can select for themselves.

As already reported in another answer, hook_init() is the hook you should implement. I will add that hook_library() is the new hook added in Drupal 7 for Javascript files like jQuery plug-ins.

Answer 5

You can use Js Injector module to add scripts directly in Drupal admin panel. Alternatively you can use drupal_add_js() function to add your js file to your page.

Answer 6

You could create a simple custom module and add it that way. The code would be similar to the following:

MYMODULE_init() {
  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/FILE.js');
}

Answer 7

You can simply use in YOURTHEME_preprocess_theme() if you want apply logical condition:

drupal_add_js(drupal_get_path('theme','your_theme').'/js/yourplugin.js');

and add also in yourtheme.info file:

scripts[] = js/yourplugin.js

Answer 8

If you're using the Context module, install Context Add Assets. Set up a global context, or a specific context, and add a new reaction to add the JS asset by path or by module.

No coding required.

Answer 9

There are many external libraries which need to be included nowadays.

Putting them all under the theme's js directory is not always desirable since sometimes those libraries are composed of multiple js files and multiple css files.

I ended up using the libraries_get_path function of the libraries module to take their paths from the sites/all/libraries dir:

Here is how I added selected files which relate to textext.js:

<?php 
function MYMODULE_init() {

  // Add jQuery library to a specific page.
  if (arg(0) == 'messages' && arg(1) == 'new') {
    // Add the jQuery TextExt library ( http://textextjs.com/ )
    $libdir = libraries_get_path('jquery-textext');
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.plugin.tags.js");
    drupal_add_js("$libdir/src/js/textext.plugin.autocomplete.js");
    drupal_add_js("$libdir/src/js/textext.plugin.suggestions.js");
    drupal_add_js("$libdir/src/js/textext.plugin.filter.js");
    drupal_add_js("$libdir/src/js/textext.plugin.focus.js");
    drupal_add_js("$libdir/src/js/textext.plugin.prompt.js");
    drupal_add_js("$libdir/src/js/textext.plugin.ajax.js");
    drupal_add_js("$libdir/src/js/textext.plugin.arrow.js");

    drupal_add_css("$libdir/src/css/textext.core.css");
    drupal_add_css("$libdir/src/css/textext.plugin.tags.css");
    drupal_add_css("$libdir/src/css/textext.plugin.autocomplete.css");
    drupal_add_css("$libdir/src/css/textext.plugin.focus.css");
    drupal_add_css("$libdir/src/css/textext.plugin.prompt.css");
    drupal_add_css("$libdir/src/css/textext.plugin.arrow.css");
  }

} ?>

I would love to hear if there is an external repository in which all of those libraries are predefined so I won't have to define them each manually.

Answer 10

I recomment you to load jQuery from the pupblic Google CDN. Check this link for more info: http://code.google.com/apis/libraries/devguide.html#jquery .Just make sure you don't load the same script multiple times in your site.

Answer 11

this is what worked for me, no need to create a module for a jQuery plugin or install one - in my template.php I added:

function YOURTHEME_js_alter(&$javascript){
    // overwriting for newer jQuery version
    $javascript['misc/jquery.js']['data'] = path_to_theme() . '/assets/js/jquery-1.9.0.js';
    // also the min...
    $javascript['misc/ui/jquery.ui.core.min.js']['data'] = path_to_theme() . '/assets/js/jquery-ui-1.10.0.custom.min.js';
    // here I add the library (jQuery plugin) to resolve an error -> $.browser.msie undefined
    $javascript[path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js'] = array(   
        "group" => -100,
        "weight" => -18.990,
        "version" => "1.1.0",
        "every_page" => true,
        "type" =>   "file",
        "scope" => "header",
        "cache" => true,
        "defer" => false,
        "preprocess" => true,
        "data" =>  path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js',
    );

}

Answer 12

another way is to add the following code to the page.tpl.php file
drupal_add_js(drupal_get_path('theme', 'path/to/your/plugin') . '/plugin.js', 'file');