Jquery Noconflict WordPress

When I create my blogs with many jquery apps and Mootools, many of them don’t work due to jquery conflicts. The way I made them to work together is to create jquery noconflict for every jquery I use in the header. This is my header with a few of jquery noconflict fixed.

jquery script

Create a specific name for $ variables and change all $ inside the jquery with the same name.

Mootools

<!-mediaboxadv–>
<script src=”/idogjs/mediaboxadv/mootools125mooimage.js” type=”text/javascript”></script>
<script src=”/idogjs/mediaboxadv/Quickiec.js” type=”text/javascript”></script>
<script src=”/idogjs/mediaboxadv/ltooz134c.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” media=”all” href=”/idogjs/mediaboxadv/idogjuly12c.css” />
<!-end mediaboxadv–>

Jquery FancyBox 1.3.4
<!-fancybox–>
<link rel=”stylesheet” type=”text/css” media=”all” href=”/idogjs/fancybox/idogfancyboxc1.css” />
<script src=”/idogjs/fancybox/jquery.tools.minc.js” type=”text/javascript”></script>
<script src=”/idogjs/fancybox/idogfancybox1packc.js” type=”text/javascript”></script>
<script src=”/idogjs/fancybox/jquery.easing-1.3.pack.js” type=”text/javascript”></script>
<script src=”/idogjs/fancybox/swfobject.js” type=”text/javascript”></script>
<script src=”/idogjs/fancybox/nonverblaster.js” type=”text/javascript”></script>
<script src=”/idogjs/fancybox/silverlight-ie.js” type=”text/javascript”></script>
<script src=”/idogjs/fancybox/wmvplayer.js” type=”text/javascript”></script>

<script type=”text/javascript”>
var $jQ=jQuery.noConflict();
$jQ(document).ready(function(){
});
</script>
<script src=”/idogjs/fancybox/idogfb1c.js” type=”text/javascript”></script> // Every $ inside this “idogfb1c.js” is replaced with $jQ for this script to work independently with other jqueries.
<!-end fancybox–>

Jquery Cloud Carousel
<!-cloud carousel–>
<link rel=”stylesheet” type=”text/css” media=”all” href=”/idogjs/cloudcwp/idogccc.css” />
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js”></script>
<script type=”text/JavaScript” src=”/idogjs/cloudcwp/jquery.mousewheel.js”></script>
<script type=”text/JavaScript” src=”/idogjs/cloudcwp/cloud-carousel.1.0.5.js”></script>

<script type=”text/javascript”>
var $iC=jQuery.noConflict();
$iC(document).ready(function(){
});
</script>
<script src=”/idogjs/cloudcwp/idogccc.js” type=”text/javascript”></script> // Every $ inside this “idogccc.js” is replaced with $iC for this script to work independently with other jqueries.
<!-end cloud carousel–>

Jquery FancyBox 2.0.6.1
<!-fancybox 2.0.6.1–>
<script src=”<?php bloginfo(‘template_url’); ?>/js/jquery.min172.js” type=”text/javascript”></script>
<script src=”<?php bloginfo(‘template_url’); ?>/js/jquery-scrolltofixed.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var $iZ=jQuery.noConflict();
$iZ(document).ready(function() {
$iZ(‘#search_area’).scrollToFixed({
marginTop: $iZ(‘.header_menu’).outerHeight() + 0,
limit: $iZ(‘#footer’).offset().top – $iZ(‘#search_area’).outerHeight() – 10,
zIndex: 999,
});
$iZ(‘#bread_crumb’).scrollToFixed({
marginTop: $iZ(‘.header_menu’).outerHeight() + 0,
limit: $iZ(‘#footer’).offset().top – $iZ(‘#bread_crumb’).outerHeight() – 10,
zIndex: 999,

});

/*    $iZ(‘#bread_crumb’).scrollToFixed( { marginTop: 35, limit: 0 } );*/
});
</script>
<!– Add mousewheel plugin –>
<script type=”text/javascript” src=”/idogjs/fancybox2061/jquery.mousewheel-3.0.6.pack.js”></script>

<!– Add fancyBox –>
<script type=”text/javascript” src=”/idogjs/fancybox2061/jquery.fancybox.pack.js”></script>
<link rel=”stylesheet” type=”text/css” href=”/idogjs/fancybox2061/idogfancybox2c2.css” media=”screen” />

<!– Add fancyBox – button helper –>
<link rel=”stylesheet” type=”text/css” href=”/idogjs/fancybox2061/helpers/jquery.fancybox-buttonsc.css” />
<script type=”text/javascript” src=”/idogjs/fancybox2061/helpers/jquery.fancybox-buttonsc.js”></script>

<!– Add fancyBox – thumbnail helper –>
<link rel=”stylesheet” type=”text/css” href=”/idogjs/fancybox2061/helpers/jquery.fancybox-thumbsc.css” />
<script type=”text/javascript” src=”/idogjs/fancybox2061/helpers/jquery.fancybox-thumbsc.js”></script>
<script type=”text/javascript” src=”/idogjs/fancybox2061/helpers/jquery.fancybox-mediac.js”></script>

<script type=”text/javascript”>
var $jF=jQuery.noConflict();
$jF(document).ready(function(){
});
</script>
<script type=”text/javascript” src=”/idogjs/fancybox2061/idogfb20c2.js”></script>// Every $ inside this “idogfb20c2.js” is replaced with $jF for this script to work independently with other jqueries.
<!-end fancybox 2.0.6.1–>

Jquery PrettyPhoto

<!-prettyphoto–>
<link rel=”stylesheet” type=”text/css” media=”all” href=”/idogjs/prettyphoto/css/idogpP.css” />
<script src=”/idogjs/prettyphoto/js/idogpPc.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var $jP=jQuery.noConflict();
$jP(document).ready(function(){
});
</script>
<script src=”/idogjs/prettyphoto/facebook.js” type=”text/javascript”></script>
<!-end prettyphoto–>

Jquery ImagePreview

<!–iPreview–>
<script src=”/idogjs/ipreview/imgpreview.full.jquery.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var $iP=jQuery.noConflict();
$iP(document).ready(function(){
});
</script>
<script src=”/idogjs/ipreview/ipnew.js” type=”text/javascript”></script>
<!–End iPreview–>

When everything is done we should have a test post to check and make sure all jqueries are working together

1 Trackback or Pingback

Leave a Reply

Your email address will not be published. Required fields are marked *