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