View Full Version : Prototype and jquery conflict

07-22-2008, 05:50 PM
First of all. I know no javascript whatsoever. That's why I am asking here.

I have these files included:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>

and it seems like the jquery files from the codaslider breaks the lightbox, so now images opens in new window like normal. The site ignores the lightbox stuff.

It's obvious that there's some kind of conflict here.
What should I do? Any help is really appreciated

07-23-2008, 05:55 AM
jQuery will allow it's object to be assigned to something other than $, so you can run something like this:

var $$ = jQuery.noConflict();
// Do something with jQuery
$$("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Check out this link for more info: http://docs.jquery.com/Core/jQuery.noConflict

07-23-2008, 08:11 AM
Prototype has a $$ function as well though, so set it to something else :)

Or find a lightbox that works with jquery.

07-23-2008, 04:20 PM
I wasn't aware of the $$ in prototype. Good to know!

Here's a jQuery lightbox plugin: http://www.balupton.com/sandbox/jquery_lightbox/

07-25-2008, 12:54 PM
Thank you so much for the help. I am going to the jquery lightbox then, since I have no idea how to implement that jquery fix. :)

Thanks again!

07-25-2008, 03:59 PM
On the front of JQuery's website there is this link: http://docs.jquery.com/Using_jQuery_with_Other_Libraries


08-01-2008, 12:09 AM
So I applied


// Use jQuery via jQuery(...)

// Use Prototype with $(...), etc.

after my js includes and no luck, no change.

Do I have to edit that code some way to match what I want to do?

08-04-2008, 10:50 PM
I realise I have to edit the noConflict code somehow, though I do not know how.

As mentioned I am using codaslider and lightbox 2:

Any and all help is truly appreciated!

03-20-2009, 08:44 AM
try to use this

<script src="jquery.js"></script>
<script src="prototype.js"></script>
// Use jQuery via jQuery(...)

// Use Prototype with $(...), etc.

Its from same jQuery official page "http://docs.jquery.com/Using_jQuery_with_Other_Libraries" you might have visited already.

This solution worked for me. Which is under heading "Including jQuery before Other Libraries".

Try to include jquery before prototype. use "jQuery" instead of "$". and There is no need for overriding the $-function by calling "jQuery.noConflict()". also remove "$" given as argument if using following solution.


// Put all your code in your document ready area
// Do jQuery stuff using $

notice the "$" as argument in "jQuery(document).ready(function($){".

Hope it'll help.

05-22-2009, 10:23 AM
If you can change $ variable in jquery you can also change the same variable in prototype and that's what I did. It worked for me. I replaced all $ to $$$ in prototype.js.

06-01-2009, 05:37 AM
Thanks :thumbsup:

01-18-2010, 08:28 PM

I think I have a simular problem.
Could you pls look at my testpage here:

FF and IE are reacting different.

01-19-2010, 06:03 PM
To avoid problems with Prototype, I use the no conflict as in my example:

var $j = jQuery.noConflict();
$j(document).ready(function() {

//Enter jQuery code here


Works perfectly!

03-29-2010, 08:03 AM
Here is more detailed explanation and work around.

06-22-2010, 12:15 PM
If you can change $ variable in jquery you can also change the same variable in prototype and that's what I did. It worked for me. I replaced all $ to $$$ in prototype.js.

I anyone tries this try not do do a 'replace all' on $ with `new name`

You have to worry about

this.replace(filter || Prototype.JSONFilter, '$1');
JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,

and other functions

try a regexp replace all such as \$\s*\(

07-15-2011, 06:34 PM
I am using this plugin :

10-07-2011, 09:47 PM
Hi I am new to this forum but I am having a similar problem in that I am trying to use a jquery light box and a jquery spy plugin at the the same time. the spy works but after the images are brought in the lightbox no longer works

Here is my code

<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript" charset="utf-8">
$(function() {

$(function () {
$('ul.spy').simpleSpy().bind('mouseenter', function () {
}).bind('mouseleave', function () {
(function ($) {

$.fn.simpleSpy = function (limit, interval) {
limit = limit || 3;
interval = interval || 6000;

return this.each(function () {
// 1. setup
// capture a cache of all the list items
// chomp the list down to limit li elements
var $list = $(this),
running = 'true',
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
height = $list.find('> li:first').height();

// capture the cache
$list.find('> li').each(function () {
items.push('<li>' + $(this).html() + '</li>');

total = items.length;

$list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });

$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

$list.bind('stop', function () {
running = false;
}).bind('start', function () {
running = true;

// 2. effect
function spy() {

if (running) {

// insert a new item with opacity and height of zero
var $insert = $(items[currentItem]).css({
height : 0,
opacity : 0,
display : 'none'

// fade the LAST item out
$list.find('> li:last').animate({ opacity : 0}, 1000, function () {
// increase the height of the NEW first item
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

// AND at the same time - decrease the height of the LAST item
// $(this).animate({ height : 0 }, 1000, function () {
// finally fade the first item in (and we can remove the last)
// });

if (currentItem >= total) {
currentItem = 0;
setTimeout(spy, interval)





Any help would be greatly appreciated