Trying to get FlexSlider jQuery Slider to work with Drupal_问答_开发者

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.

Drupal 7 requires that you wrap your jQuery with a variable scope.

(function($) {

  //jQuery can go in here

})(jQuery);

Does this help?

Edit: I made FlexSlider/have successfully (with great ease) installed it on a Drupal 7 setup here. One way or another, I should be able to help you sort this out.

Drupal 7 Flexslider-Took me a long time to find this but it really was a good one. Now I know. Full jquery call:

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

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.

Spent 2 hours trying to work this out when all i needed to do was download the Library files from https://github.com/woothemes/FlexSlider/zipball/master add them into the sites-->all-->libraries folder and it worked... immediately!