This content has been archived. It may no longer be relevant

I don’t post much these days, so when I do, you know it has to be something really important, or useful, or both.

I was working on a website for a colleague who wanted to have dynamic tabs in his image gallery, each tab a different catergory of images.

He already had a lightbox gallery installed and I noticed that when I added my jQuery dynamic tabs, that lightbox had stopped working. The images were just loading in a new page now.

Investigating this I found that the two jQuery commands, one for the dynamic tabs and the other for lightbox, were causing a conflict with each other.

Searching the internet, the solution given for this was the jQuery.noConflict() command but when I visited this website and implemented the following code, the entire webpage just broke.


script src="prototype.js" /script
script src="jquery.js" /script
script
jQuery.noConflict();

// Use Prototype with $(...), etc.
$('someid').hide();
/script


Now I’m not entirely sure what I’m doing in jQuery, but I must have been doing something wrong. I kind of understood I was replacing the use of the common function, in this case $s but I wasn’t sure how I was replacing it or with what.

I did however find a solution, thanks to white_falcon over on the jQuery forums, who made it so much simpler. After you’ve called your jQuery scripts in the head of the page enter the following two lines of code:


script src="jquery-1.6.4.min.js" /script
script jQuery.noConflict(); /script

Then make sure you rename any $s functions to jQuery. I only had to change the dynamic tabs in my example.

Fixed. Hours of suffering relieved by those two bloomin’ simple lines of code.

I hope other people will find this as useful as I did.

Many thanks,

EDIT: Sorry for the lack of < & >‘s but for some reason the post won’t accept them despite being in [code] tags