Trying to get FlexSlider jQuery Slider to work with Drupal

By p55mac on 24 Sep 2011 at 14:05 UTC

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?

Comments

Are you sure the scripts are

nevets commented 24 September 2011 at 14:39

Are you sure the scripts are being brought into the page?

Did you clear the theme registry? If not flexslider.css will not be included.

What works, what does not work?

How are you starting the slider?

I declared flexslider.css in

p55mac commented 26 September 2011 at 06:44

I declared flexslider.css in the subtheme.info file but I installed devel and have cleared the theme registry. SO it loads fine.

The class tags on the ul and wrapper are coming through as well.

Below is how I have declared the scripts for the slider 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>

I think the problem is somewhere in there. But everything does appear ok in the source...

See Managing JavaScript in

nevets commented 26 September 2011 at 16:03

See Managing JavaScript in Drupal 7 and look down to "Using jQuery". '$' is no longer defined by default so you follow the example there.

did the suggested fix work?

betovarg

he/him

Spanish

San José

commented 28 September 2011 at 16:58

did the suggested fix work?

Excellent question

dOwen-1 commented 29 September 2011 at 13:31

I'm trying to integrate FlexSlider with a sub-theme of the Omega responsive theme. Not being very PHP savy I would appreciate it if someone posted the working code.

Also, there is a parallel discussion at:

http://stackoverflow.com/questions/7539542/trying-to-get-flexslider-jquery-slider-to-work-with-drupal

which points to a great D7 example at:

http://www.challengedairy.com/

Dan

You need to add your js and

philosurfer commented 4 October 2011 at 20:36

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));

I wrapped my view HTML list with a DIV having a class of 'featured-wrapper' to make this work. Flex slider requires a DIV around the UL as a target to run.

Hope this helps! :)

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

-
We are the cult of personality.
-

Instead of defining

nevets commented 4 October 2011 at 21:40

Instead of defining sjm_preprocess() it would be better to define sjm_preprocess_page(). The later is only called once per page, the former many times.

didnt know that...

philosurfer commented 4 October 2011 at 23:53

Thanks! good call..

Im still new to this hooks thing..... years of Zend habits are hard to break.

-
We are the cult of personality.
-

sjm_preprocess() versus sjm_preprocess_page()

dOwen-1 commented 5 October 2011 at 15:27

That being the case, would the code:

    /** 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));

Simply be modified to:

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

Sorry to display my ignorance, I'm coming from a non-programming front end background to Drupal.

Correct.

nevets commented 5 October 2011 at 15:28

Correct.

Thanks

dOwen-1 commented 5 October 2011 at 15:33

Superfast reply. Tx agn.

aahh ha! I got it to work

p55mac commented 5 October 2011 at 20:11

I was almost ready to give up. That was a huge help.

just a small note to help out dOwen or anyone else there's an extra } in the 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));

But defining sjm_preprocess_page() causes the site not to load for me...

'/js/sjm.js'

dOwen-1 commented 5 October 2011 at 15:38

Thanks for the post.

What I'm not seeing is what goes inside sjm.js.

Did I miss it, or is it already there somehow?

See the comment titled You

nevets commented 5 October 2011 at 15:41

See the comment titled You need to add your js and and look at second code box in post.

Second code box is the contents of sjm_front.js, not sjm.js?

dOwen-1 commented 5 October 2011 at 16:00

I know I'm missing something. Sorry I'm blind. Is sjm.js empty?

I think

p55mac commented 5 October 2011 at 20:16

sjm.js is any other java script that your site might load. - That was my assumption. I left it out and it still works for me.

The second code box is the file:sjm_front.js which you do need.

yes.. sjm.js is to run on any

philosurfer commented 5 October 2011 at 22:05

yes.. sjm.js is to run on any other page besides the front page...

That conditional was specific in stating that you only want to load the JS and CSS for the slider on the front page... otherwise.. load the other JS.

Reading more into this it would be better to hook this to the view as apposed to the front page.... I will mock up some more code here in a little.

I plan on packaging this in a module in the next week or so... it will be my first community contribution... should make some people happy

glad to see some of you got it working.

-
We are the cult of personality.
-

wrapped my view HTML list with a DIV having a class of 'featured

dOwen-1 commented 5 October 2011 at 16:07

Is it something like this?

<script src="/your-path/js/jquery.flexslider-min.js"></script>
<div class="flexslider">
  <?php if (count($rows) > 1): ?>
    <div id="slider-nav-container"></div>
  <?php endif; ?>
  <ul class="slides">
    <?php foreach ($rows as $id => $row): ?>
      <li class="<?php print $classes_array[$id]; ?>"><?php print $row; ?></li>
    <?php endforeach; ?>
  </ul>
</div>

this is how I wrapped my HTML views list

p55mac commented 5 October 2011 at 20:34

1. Created a Block View - Display: HTML List
2. Under format: HTML list select settings
3. Add a wrapper class of "flexslider"
4. List class of "slides"
That will create the correct styles to work out of the box with FlexSlider.

I'm happy to put together a quick step by step on how I got FlexSlider working with drupal. Just not sure
Where would the best place for it be?

Thanks everyone for their help.

This thread would be a great place to put your step by step

dOwen-1 commented 6 October 2011 at 18:44

p55mac,

Thank you.

Put it wherever you want. Just please let us know where it is!

Yaaaaa. Finaly!

zero_cool commented 19 October 2011 at 05:43

Okay I finaly got it. Note to all trying to implement this. its very easy but first real ALL the posts so you are not missing some small detail. Also you dont need to add a view simply use a block that calls images on the server and wrap it with div tags....

DIV class=flexslider
UL class=slides
add images here
/UL
/DIV

double post

p55mac commented 5 October 2011 at 20:17

double post

I'm a bit confused

Argus commented 11 October 2011 at 19:42

where do you use featured-wrapper and where flexslider in the view?

If I use featured-wrapper as a Wrapper class I get a row of slides, but if I use flexslider I get nothing at all.

Ah, I figured it out,

Argus commented 11 October 2011 at 20:08

Ah, I figured it out, use:

(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));

That has the added } at the correct place.

Then add featured-wrapper as Wrapper class to the HTML list, and slides as List class. Now I'm a bit puzzled why you wrote you used flexslider as a Wrapper class?

Small update, not

Argus commented 12 October 2011 at 11:22

Small update, not .featured-wrapper but .flexslider should be used as the Wrapper class, and in theme_front.js you should use:

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

        $(window).load(function () {

           addFlexSlider();
        });

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

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

(jQuery));

Sorry to be dense

dOwen-1 commented 12 October 2011 at 18:59

How are the images added?

Via HTML or Lightbox or ??

Use a view.

philosurfer commented 14 October 2011 at 05:14

Read up on creating an html list in views..

-
We are the cult of personality.
-

Ha, I just stumbled on this,

Jeff Burnz commented 25 October 2011 at 22:49

Ha, I just stumbled on this, my new theme includes a responsive slideshow using FlexSlide: http://drupal.org/project/at-commerce, not using Views but rather a Node type and Nodes in Block module, instructions are included if you are interested.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.