Home/ Questions/Q 6656571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:39:36+00:00

I’ve been wrestling with trying to get FlexSlider http://flex.madebymufffin.com/ to work with Drupal 7

  • 0

I’ve been wrestling with trying to get FlexSlider http://flex.madebymufffin.com/ to work with Drupal 7 all today as it suits my needs perfectly and the logic of how to get it work made sense but hasn’t actually worked.

My setup:
Using a subtheme of AdaptiveTheme
Created a custom view block that outputs an unordered list of images that link to a node. I have applied the appropriate FlexSlider classes to the wrapper and list.
Declared the two js scripts in the template.php
Declared the flexslider.css in my theme.info file

I’m newish to drupal and am more a CSS kind of guy – but I think it’s a jQuery conflict/version problem…

Any ideas?

This is what I had in my template.php 

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="js/jquery.flexslider-min.js"></script>

  <script type="text/javascript">
      $(window).load(function() {
         $('.flexslider').flexslider();
      });
  </script>

</head>

@WChargin @TylerSmith wrapping the jQuery might be the solution but I think I’ve got some Syntax wrong somewhere along the way. Or it may be just something else.

I assume I have to wrap the third script with a variable code like so:

(function($) {
    $(window).load(function() { 
    $('.flexslider').flexslider();
})(jQuery);

But when I put this in my template.php file it causes the site not to load.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to add your js and css through the template.php file or a pre process file.
    I have this slider working perfectly with a view.

    use drupal_add_js() and drupal_add_css()

    Example code below: sjm is the name of my theme.

    file template.php: notice i am only loading css and js on the front page:

    <?php
sjm_preprocess();

/** F U N C T I O N S */
function sjm_preprocess() {
    // add the main SJM js
    drupal_add_js(drupal_get_path('theme', 'sjm') . '/js/sjm.js', array('scope' => 'header', 'weight' => 0));

    /** FRONT PAGE STUFF        */
    if (drupal_is_front_page()) {
        drupal_add_js(drupal_get_path('theme', 'sjm') . '/js/sjm_front.js', array('scope' => 'footer', 'weight' => 1));

        addFlexSlider();
    }
}

/** Flexslider 1.7  * */
function addFlexSlider() {
    drupal_add_js(drupal_get_path('theme', 'sjm') . '/js/FlexSlider-1.7/jquery.flexslider-min.js', array(
        'scope' => 'footer',
        'weight' => '1'
    ));
    drupal_add_css(drupal_get_path('theme', 'sjm') . '/js/FlexSlider-1.7/flexslider.css', array(
        'group' => CSS_THEME,
        'weight' => 0
    ));
}

?>

    Now for the js file being loaded: sjm_front.js (sjm.js processes other functions when it is not the front of the site.)

    File: sjm_front.js

    (function ($) { /* required to use the $ in jQuery */
    $('.featured-wrapper').hide(); /* hide the ul list first */
    $(document).ready(function () {  

        $(window).load(function () {

           addFlexSlider();
        });

    }); // end of $(document).ready()

    /** FlexSlider */
    function addFlexSlider(){
        $('.featured-wrapper').show().flexslider({
            animation: "slide",
            controlNav: false
        });
    }
    }

}(jQuery));

    Hope this helps! 🙂

    Check out seanjmorris.com soon…. to see an active version of this.

    • 0