How do I include a JavaScript file and pass the value of a PHP variable with a single function call? I'm trying to pass a PHP variable to my JavaScript file. The file is js/backgroundConfig.js, it's in the theme directory, and this is the content of the file.

(function($, Drupal){
  Drupal.behaviors.backgroundAnimation = {
    attach: function(context, settings) {
      alert(Drupal.settings.variableName);
      alert(Drupal.settings.basePath);
    }
  };
})(jQuery, Drupal);


Drupal.settings.basePath is displayed correctly, but I've no idea how to pass variableName from template.php. I've tried a couple of methods but none of them work. 

There are tons of examples on the web but none of them contains the filename and the settings together. Like this one: 

drupal_add_js(array('variableName' =&gt; 'value'), 'setting');


Alright, but where I should put my filename? I always add my JavaScript file like this.

drupal_add_js(path_to_theme().'/js/backgroundConfig.js');


How do I combine it together?
How to combine it togather?


You don't - Javascript files and settings are two completely different things. Anything you add to the settings will be available on the global Drupal object, which will be available by the time the code in your JS file is invoked.

Your code should be:

drupal_add_js(array('variableName' =&gt; 'value'), 'setting');
drupal_add_js(path_to_theme().'/js/backgroundConfig.js');


Or the other way round, it really doesn't matter.