Community & Support

Adding a jQuery plugin (smooth div scroll) to work with my theme

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

Defining it inside ..

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.

This code worked for

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();
   }
}
nobody click here