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>