I was having the same issue and this is how I solved it. May not work for everyone, ’cause we all run different jquery scripts, but I’m thinking it would be similar for most of us.
I have a jquery slider, menu hover and tooltips on my site:
http://www.theartsofhuntingandfishing.com When I called for Maxigallery on the homepage to display recent images, my slider, tooltips and menu hover stopped working. But the gallery worked fine.
I found several posts about needing to load the mootools.js file before the jquery file is loaded. You can do this by adding &disable_js_libs=`1` to the Maxigallery call in your document and putting the path to the mootools.js file in the <head> of your template, before the jquery scripts. Well, I did this and my slider, menu hover and tooltips worked but now my images opened in a white page without the slimbox effect. When I removed the &disable_js_libs=`1`, the slimox worked but the others didn’t.
So here’s what I did:
I found lots of links about the noConflict stuff, but really struggled to find out where to put it!
In my js folder there is a file called scripts.js. This file contains all the scripts for my tooltip, slider and hover so I thought maybe I was onto something. I found this file by looking in my template code to see what scripts were being served up. Most of the scripts looked like a bunch of mumbo jumbo but this one was very neat and organized.
I placed
var $j = jQuery.noConflict();
before each script was called then changed all the $ symbols to $j
Here is my full code after I made the changes: I only added
var $j = jQuery.noConflict(); to the parts of the script that I was having trouble with (ie. hover, slider, tooltips).
// start menu hover
var $j = jQuery.noConflict();
$j(function() {
$j(’#navigation ul li’).hover (
function() {
$(this).addClass(’navhover’);
}, function() {
$j(this).removeClass(’navhover’);
}
);
});
$j(function() {
if ( $j("#navigation ul li").hasClass("current") )
$j(this).addClass(’navhover’);
});
// start slider
var $j = jQuery.noConflict();
$j(window).bind("load", function() {
$j("div#sliderc").codaSlider()
});
// start tooltip
/*
* Tooltip script
* powered by jQuery (
http://www.jquery.com)
*
* written by Alen Grakalic (
http://cssglobe.com)
*
* for more info visit
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
var $j = jQuery.noConflict();
this.tooltip = function(){
/* CONFIG */
xOffset = -35;
yOffset = -50;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$j("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$j("body").append("<p id=’tooltip’>"+ this.t +"</p>");
$j("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$j("#tooltip").remove();
});
$j("a.tooltip").mousemove(function(e){
$j("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$j(function() {
tooltip();
});
// prepend the span tag to the photo gallery
$(function() {
$(".gallery a, a.productImages").prepend("<span></span>");
});
// send the email
// let’s start the jQuery while I wait.
// step 1: onload - capture the submit event on the form.
$(function() { // onload...do
$(’#form’).submit(function() {
// now we’re going to capture *all* the fields in the
// form and submit it via ajax.
// :input is a macro that grabs all input types, select boxes
// textarea, etc. Then I’m using the context of the form from
// the initial ’#contactForm’ to narrow down our selector
var inputs = [];
$(’:input’, this).each(function() {
inputs.push(this.name + ’=’ + escape(this.value));
})
// now if I join our inputs using ’&’ we’ll have a query string
jQuery.ajax({
data: inputs.join(’&’),
url: this.action,
timeout: 2000,
error: function() {
console.log("Failed to submit");
},
success: function(r) {
if (r == 1) {
$(’form’).slideUp(’slow’);
$(’p#please’).slideUp(’slow’);
$("h1").after(’<p id="success" style="display:none;">Your message was sent successfully! We will contact you as soon as possible. </p>’);
$(’#success’).slideDown(’slow’);
}
else {
alert(r)
}
}
}) // checkout
http://jquery.com/api for more syntax and options on this method.
// re-test...
// by default - we’ll always return false so it doesn’t redirect the user.
return false;
})
})
Hopefully this will help. All the scripts may not be in the same file like mine is, so you may have to alter multiple files.
Just wanted to pass along what I did, plus, I’ll probably need to refer back to this very post so I can remember on future sites.
