Hi, I'm reasonably new to Drupal and Theming, and especially Javascript. I'm looking to add a javascript plugin into my theme to help display a gallery of images and let the user scroll through at their own pace.

The plugin I'd like to use is called Smooth Div Scroll ( http://www.maaki.com/thomas/SmoothDivScroll/ ) and it does pretty much exactly what I want in a gallery.

What I would like to know is what will be the best way to add this jQuery plugin into the theme I'm working on. I am using a base theme of Blueprint and creating a subtheme from that in Drupal 6.x. Should I be adding the plugin in via a script.js file which is referred to in my .info file, or is there a better / more stable way to do things? Any help would be appreciated.

Comments

odyseg’s picture

the .info file means you are telling Drupal that it should be included to every page. I suppose you only want to add this plugin to a specific page right? For example I am using page content type as my front page, and If I needed to put some plugins to this page what I usually do is to edit my template.php file and add this code

function thenameoftheme_preprocess_node_page(&$vars) { // node_page since my front page is made of a page content type
   if(drupal_get_path_alias($_GET['q']) == 'nameofyourfrontpage') { // we get the name of your frontpage
       drupal_add_js('yourfiles');
       ....
  }
}

p.s. 'nameofyourfrontpage' : I assume you enable the 'path module' so that you can also define your page name.

velpan’s picture

The following code worked for me:

function thenameoftheme_preprocess_page(&$vars) {

 //  if we are at frontpage, add some jquery code to do the animation
   if ($vars['is_front']) {
      drupal_add_js('sites/all/modules/jquery_ui/jquery.ui/ui/jquery.ui.widget.js');
      drupal_add_js('sites/all/libraries/SmoothDivScroll/js/jquery.smoothDivScroll-1.1-min.js');
      drupal_add_css('sites/all/libraries/SmoothDivScroll/css/smoothDivScroll.css');
      $vars['script'] = drupal_get_js();
      $vars['styles'] = drupal_get_css();
   }
}