0

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:

<div class="tp-banner-container">
<div class="tp-banner" >
    <ul>
        <!-- SLIDE  -->
        <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
            <!-- MAIN IMAGE -->
            <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">
            <!-- LAYERS -->
            <!-- LAYER NR. 1 -->
            <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
                data-x="85"
                data-y="224"
                data-speed="500"
                data-start="1200"
                data-easing="Power4.easeOut">My Caption
            </div>
            ...

        </li>
        <!-- SLIDE  -->
        <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
            <!-- MAIN IMAGE -->
            <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">
            <!-- LAYERS -->
            <!-- LAYER NR. 1 -->
            <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
                data-x="85"
                data-y="224"
                data-speed="500"
                data-start="1200"
                data-easing="Power4.easeOut">My Caption
            </div>
            ...
        </li>
        ....
    </ul>
</div>

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

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

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 :(

Improve this question

1 Answer 1

Reset to default
3

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);
Improve this answer
10
  • I've added that snippet to my front page but it doesn't work
    – kaipee
    Feb 19, 2014 at 15:05
  • You'll need to customise it to fit your exact site setup, the above is an abstract example. Check for JS errors on the console, then set about fixing em!
    – Clive ♦
    Feb 19, 2014 at 15:15
  • Are you saying that the Slider Revolution script doesn't need altered in any way? The only thing I need to tweak would be the snippet at the end of <body> ?
    – kaipee
    Feb 19, 2014 at 15:45
  • 1
    It depends on each individual one, of course, but no - generally speaking, jQuery plugins don't need to be re-written for Drupal. Drupal is the backend, the front end is HTML, CSS and Javascript, so what works in one framework will by definition work in another if the same code is used. It sounds like you have JS problems not related to this though. Remove this code from your page - have all the JS errors gone? If not, you need to fix those up before your plugin code will ever have a chance to be run
    – Clive ♦
    Feb 19, 2014 at 16:46
  • 1
    I would say that most jQuery plugins don't need to be rewritten for Drupal. Older ones may not use the current pattern of using a closure w/ no-conflict mode (this could be the root of your problem based on a comment a few up). Also, Drupal ships be default with a old version of jQuery. Newer plugins may assume a newer version. The jQuery Update module can help with this, to an extent.
    – mpdonadio ♦
    Feb 19, 2014 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.