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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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