How do I get third party jQuery plugins to work with Drupal? I am trying to use the Slider Revolution jQuery plugin (from ThemePunch) on my Drupal site to create a slider on the front page.

I cannot for the life of me figure how to get this working. I have manually built a simple HTML page (outside of Drupal) to check the plugin and it works flawlessly, I just cannot seem to get it working in Drupal.

Drupal version: 7

Slider Revolution version: 4.1.2

Instructions for Slider Revolution: http://pastebin.com/gxNSV4hh

My theme is using jQuery 1.9.0

I have added into mytheme.info:

scripts[] = js/rs-plugin/js/jquery.themepunch.revolution.js
scripts[] = js/rs-plugin/js/jquery.themepunch.plugins.min.js


I have added to my front page:

&lt;div class="tp-banner-container"&gt;
&lt;div class="tp-banner" &gt;
    &lt;ul&gt;
        &lt;!-- SLIDE  --&gt;
        &lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
            &lt;!-- MAIN IMAGE --&gt;
            &lt;img src="/sites/all/themes/sure2sell/js/rs-plugin/images/slidebg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
            &lt;!-- LAYERS --&gt;
            &lt;!-- LAYER NR. 1 --&gt;
            &lt;div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
                data-x="85"
                data-y="224"
                data-speed="500"
                data-start="1200"
                data-easing="Power4.easeOut"&gt;My Caption
            &lt;/div&gt;
            ...

        &lt;/li&gt;
        &lt;!-- SLIDE  --&gt;
        &lt;li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" &gt;
            &lt;!-- MAIN IMAGE --&gt;
            &lt;img src="/sites/all/themes/sure2sell/js/rs-plugin/images/darkblurbg.jpg"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
            &lt;!-- LAYERS --&gt;
            &lt;!-- LAYER NR. 1 --&gt;
            &lt;div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
                data-x="85"
                data-y="224"
                data-speed="500"
                data-start="1200"
                data-easing="Power4.easeOut"&gt;My Caption
            &lt;/div&gt;
            ...
        &lt;/li&gt;
        ....
    &lt;/ul&gt;
&lt;/div&gt;




Using Tracking Code module I have added (before /body) :

&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
   jQuery('.tp-banner').revolution(
    {
      delay:9000,
      startwidth:1170,
      startheight:500,
      hideThumbs:10
    });
  });
&lt;/script&gt;


Slider Revolution file jquery.themepunch.revolution.js is structured like:

(function(jQuery,undefined){

    ////////////////////////////////////////
    // THE REVOLUTION PLUGIN STARTS HERE //
    ///////////////////////////////////////

    jQuery.fn.extend({

    // OUR PLUGIN HERE :)
    revolution: function(options) {
    ...........
    ...........
    }})

})(jQuery);


Slider Revolution file jquery.themepunch.plugins.min.js is structured like:

(function(t){"use strict";var e=t.GreenSockGlobals||t;if(!e.TweenLite){
    ..........
    ..........
);

(function(e,t){
    ..........
    ..........
})(jQuery)


How do I go about implementing this in Drupal? I believe Drupal expects jQuery/Javascript to be in a specific format (https://drupal.org/update/modules/6/7#javascript_compatibility) but I really don't know where to start with this. JS/jQuery really isn't my thing so I'm unsure what needs changed/added to make this compatible with Drupal.

Update: it works flawlessly, even with jQuery 1.7 : http://build.kaipee.co.uk/drupaltest/

Looks like it's an issue with my site/theme :(
Read Managing Javascript in Drupal 7 for the full details, but basically you're looking for something like this:

(function($, Drupal) {
  Drupal.behaviors.sliderRevolution = {
    attach: function(context, settings) {
      $('.tp-banner', context).once('sliderRevolution', function() {
        $(this).revolution({
          delay:9000,
          startwidth:1170,
          startheight:500,
          hideThumbs:10
        });
      });
    }
  }
})(jQuery, Drupal);