0

I created a custom front page using page--front.tpl.php, and I added a Bootstrap carousel on it which works fine, but the javascript I have (carou.js which is in mysubtheme'/js/carou.js') is not called. This is the Drupal behavior code.

(function ($) {
Drupal.behaviors.carou = {
    attach: function(context, settings) {
        $('#myCarousel').carousel({
            pause: false,
            interval: 3000,
        });
    }
}       
})(jQuery);

I added it using the following code in the template.php file.

function bootstrap_subtheme_preprocess_page($vars) {
  if (drupal_is_front_page()) {
     drupal_add_css(drupal_get_path('theme', 'bootstrap_subtheme') . "/css/frontpage.css");
   //adding carou.js to front page
     drupal_add_js(drupal_get_path('theme', 'bootstrap_subtheme') . '/js/carou.js', 'file');
   }
}

I want to control the carousel options of pause: false interval:3000 but I was not able to do so. This makes me think the JavaScript code is not being called, and I don't know what is not right in the code. I am not also very well versed with Drupal behaviors.

What is wrong in my code?

  • Does ID myCarousel exist? If you put a console.log() or an alert() in the attach method, is that called? – cilefen Jun 13 '16 at 13:31
  • yeah. it does exist. its the ID for the working carousel (#myCarousel) i have created. – okello Jun 13 '16 at 13:42
  • And what did debugging with a console.log() reveal? – cilefen Jun 13 '16 at 16:45
  • i didn't debug it but what i was meaning is the ID is for the carousel i created – okello Jun 13 '16 at 16:49
  • My subtheme name is bootstrap_subtheme as shown in the code snippet i posted above. – okello Jun 13 '16 at 19:43
0

Finally fixed it. I modified the code this way

drupal_add_js(drupal_get_path('theme', 'bootstrap_subtheme') . '/js/carou.js', array( 
                                                                                      'type' => 'file', 
                                                                                      'group' => JS_LIBRARY, 
                                                                                      'weight' => -1)); 

I added group and weight to it then then drupal.behaviors code had some few errors in the structure. The last line was})(jQuery); But i fixed it to }(jQuery));

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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