CODEWITHSUNDEEP
jqueryflexsliderjoomla3.0
user2668042
user2668042

Reputation: 113

$(...).flexslider is not a function error

I'm developing a Joomla 3 template using the T3 Framework and I've included an IceCarousel module which uses the Flexslider plugin. However, the IceCarousel module isn't working because there is a javascript error that says: 

$(...).flexslider is not a function
Line 477

I've taken a look at the page source and the flexslider source files are definitely there. There is also a /media/jui/jquery-noconflict.js file which comes standard with Joomla 3. I am not sure if this is what is causing the problem. Is this an issue of the order of the stacking of the javascript files?

http://www.veterantrainingsymposium.com/2014-home-page

Upvotes: 10

Views: 37561

Answers (5)

Kablooey Monster
Kablooey Monster

Reputation: 170

For people using Wordpress and getting this error:

Make sure that the link to the FlexSlider js ( ie: <script defer src="<?php bloginfo('template_url'); ?>/js/jquery.flexslider-min.js"></script> ) is below <?php wp_head(); ?>

This is applicable to loading script in the header.php file. Better practice would be to load all js in the footer, but there may be instances when you don't have control over that.

Hope this helps someone else as it helped me :)

Upvotes: 1

Jack Robson
Jack Robson

Reputation: 2302

I was using a WordPress plugin (Meta-Slider) and it did not include the Jquery Flexslider module.

Downloaded from here: https://github.com/woocommerce/FlexSlider

Added to my project, added to my header after a normal Jquery...

    <script src="<?php echo get_bloginfo('template_directory'); ?>/js/jquery-3.2.1.min.js"></script>
    <script src="<?php echo get_bloginfo('template_directory'); ?>/js/jquery.flexslider-min.js"></script>

Then got rid of some other buggy JS code that came after and it's working.

Upvotes: 0

Amit
Amit

Reputation: 61

I was faced the same problem and fixed it. I have used only one instance of jquery.js file, but still was getting the same problem.

After self investigating finally I got the issue and fix it,keep in mind do not use defer or async keyword in below 2 files:

1- jquery.flexslider-min.js

2- jquery.prettyPhoto.js

Upvotes: 1

Peter
Peter

Reputation: 55

Try simplifying your code to test if there is a timing issue, e.g.:

$(document).ready(function() {
$('#icecarousel119').flexslider({
    selector: ".slides > div", 
    animation: "slide",
    direction: "horizontal",
    itemWidth:90,
    slideshowSpeed:5000, 
    animationspeed:600,  
    itemMargin:0,
    minItems:1,
    maxItems:0, 
    move: 0,    

            slideshow: false,

            directionNav: true,

            controlNav: true,

    start: function(slider){
      $('body').removeClass('loading');
    }
  });
});

});

Also, flexslider examples use class, not id (though I don't think this is causing the issue)

Upvotes: 0

Mangesh Parte
Mangesh Parte

Reputation: 2177

You have defined the jquery two times. remove one jquery http://gyazo.com/c784a654eefe6e1b6ac061e562f3f051

Upvotes: 23

Related Questions