Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
134
rated 0 times [  135] [ 1]  / answers: 1 / hits: 39547  / 10 Years ago, tue, may 6, 2014, 12:00:00

I am working on this website ( I wasn't the one made the website but I have to fix it unfortunately).
I've got this error on firebug : TypeError: j(...).bxSlider is not a function



Here is my <head>:



<script type=text/javascript src=//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js></script>
<script type=text/javascript src=/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js></script>
<link type=text/css href=/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css rel=stylesheet media=all>

<link rel=stylesheet type=text/css href=//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css media=all>
<script type=text/javascript src=//code.jquery.com/ui/1.10.4/jquery-ui.js></script>

<script src=/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js type=text/javascript></script>
<link rel=stylesheet type=text/css href=/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css>
<link rel=stylesheet href=/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css type=text/css media=screen>
<script type=text/javascript src=/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js></script>


Here is my markup:



<div class=the-main-slider-container>
<ul class=bxslider>

<li>
<img alt=slider src=/wp-content/uploads/2014/03/slider-1.jpg>
</li>

<li>
<img alt=slider src=/wp-content/uploads/2014/03/slider-2.jpg>
</li>

<li>
<img alt=slider src=/wp-content/uploads/2014/03/slider-3.jpg>
</li>

<li>
<img alt=slider src=/wp-content/uploads/2014/03/slider-4.jpg>
</li>

<li>
<img alt=slider src=/wp-content/uploads/2014/03/slider-5.jpg>
</li>

</ul>

<div id=bx-pager>
<div class=pager-wrapper>
<div class=pager-container>
<a data-slide-index=0 href=><img alt=icone src=/wp-content/uploads/2014/03/D320-icone-features-features.png></a>
<a data-slide-index=1 href=><img alt=icone src=/wp-content/uploads/2014/03/D320-icone-features-confezioni.png></a>
<a data-slide-index=2 href=><img alt=icone src=/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png></a>
<a data-slide-index=3 href=><img alt=icone src=/wp-content/uploads/2014/03/D320-icone-features-specifiche.png></a>
<a data-slide-index=4 href=><img alt=icone src=/wp-content/uploads/2014/03/d320-icone-compact2.png></a>
</div>
</div>
</div>
</div>


Here is the script:



<script type=text/javascript> 
var j = jQuery.noConflict();

j(document).ready(function()
{
j('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
mode: 'fade'
});

});

j(function ($) {
j(document).ready(function(){
j('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
});

j(document).ready(function() {
j(.various).fancybox({
maxWidth : 450,
maxHeight : 400,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});

</script>


As you can see I've tried to use noConflict;, because I saw lots of post on the internet with the same error and looks like most of them solved the issue with noConflict; but it's not working for me.



By the way, all the sliders were made with a plugin called Cyclone Slider, I really don't get what the previous developer did...



And the markup seems fine. I can't spot what's wrong. Any help would be really appreciated. Thanks a lot for your time!



Edit #1: Other instances of jQuery I've found in the source code;



     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>

<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'></script>

<script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=2.1.05'></script>

<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.min.js?ver=2.8.2'></script>

<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.carousel.min.js?ver=2.8.2'></script>

<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.swipe.min.js?ver=2.8.2'></script>

<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.tile.min.js?ver=2.8.2'></script>

<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.video.min.js?ver=2.8.2'></script>

More From » jquery

 Answers
16

After trying lots of different things, I've managed to solve my own problem. I've put the JavaScript files for bxSlider, easyResponsiveTabs and the scripts calling them to footer.php. But I've left the jQuery & jQuery UI files at the header.php along with the css files for the sliders.



Now everything is working well and the markup passed the validation test!
If you're having same kind of error;




  1. Check your jQuery and other JavaScript file paths.

  2. Check if you're using an old version of jQuery or incompatible versions of jQuery & jQuery UI.

  3. Don't work with stupid developers that may put all your link tags to footer.php and call the scripts from header.php...

  4. Check if you have different instances and/or versions of jquery.min.js

  5. (In my situation) Put your bxSlider js files to footer.php but leave the css files in header.php (for validation, just this way it worked well)



Also you can write to me, I can try to help.


[#71154] Monday, May 5, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
mitchell

Total Points: 95
Total Questions: 110
Total Answers: 87

Location: Gabon
Member since Thu, Jul 15, 2021
3 Years ago
;