Jquery Multiple Plugin Conflict
Im having a small issue trying to use multiple jquery plugins on wordpress. Im trying to get jquery bubbles v2 working with the below scripts. But for some reason the bubble plugin causes the original scripts to stop working but the pop up bubbles do work. I've tried various fixes to my knowledge (which is very limited) but none of them work if anyone can shed some light I would be very grateful. Thanks Much.
-
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/avenir.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/shapeshifter.js"></script>
<script type="text/javascript">
Cufon.replace('h1, #navigation li', { hover:true, fontFamily: 'avenir' });
Cufon.replace('h2, h3, h4, h5, h6, .more, .m, .p, .archive', { hover:true, fontFamily: 'avenir' });
</script>
-
-
<!-- Open/Close scripts -->
<script type="text/javascript">
$(document).ready(function(){
//Switch the "Open" and "Close" state per click
$("#trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("#trigger").click(function(){
$(this).next("#footer").slideToggle("slow");
});
});
</script>
The bubbles script that causes the issue
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
//create a bubble popup for each <DIV> element with class attribute as ".button"
$('div.button').CreateBubblePopup();
//set different position and align options for each <DIV>
var positions = {
'left-top' : {position: 'left', align: 'top' },
'left-middle' : {position: 'left', align: 'middle' },
'left-bottom' : {position: 'left', align: 'bottom' },
'top-left' : {position: 'top', align: 'left' },
'top-center' : {position: 'top', align: 'center' },
'top-right' : {position: 'top', align: 'right' },
'right-top' : {position: 'right', align: 'top' },
'right-middle' : {position: 'right', align: 'middle' },
'right-bottom' : {position: 'right', align: 'bottom' },
'bottom-left' : {position: 'bottom', align: 'left' },
'bottom-center': {position: 'bottom', align: 'center' },
'bottom-right' : {position: 'bottom', align: 'right' }
};
for(var id in positions){
//set customized options for each bubble popup
$('#'+id).SetBubblePopupOptions({
position : positions[id].position,
align : positions[id].align,
tail : {align: positions[id].align},
innerHtml: 'Bubble Popup <br />on '+
positions[id].position.toUpperCase()+
' side <br />and on '+
positions[id].align.toUpperCase(),
innerHtmlStyle: {
color:'#FFFFFF',
'text-align':'center'
},
themeName: 'all-black',
themePath: 'images/jquerybubblepopup-theme',
alwaysVisible: false,
closingDelay: 200
});
}; //end loop
});
//-->
</script>