Prototype and jquery conflict

[Gnowoga]

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

[PremiumBlend]

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

[GJay]

Prototype has a $$ function as well though, so set it to something else :)

Or find a lightbox that works with jquery.

[PremiumBlend]

I wasn't aware of the $$ in prototype. Good to know!

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

[Gnowoga]

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!

[A1ien51]

On the front of JQuery's website there is this link: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Eric

[Gnowoga]

So I applied

<script>
jQuery.noConflict();

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

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

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?

[Gnowoga]

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:
http://jqueryfordesigners.com/coda-slider-effect/
http://www.huddletogether.com/projects/lightbox2/

Any and all help is truly appreciated!

[fusionstrings]

try to use this

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

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

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.

jQuery.noConflict();

// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});

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

Hope it'll help.

[tman0410]

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.

[tung148]

Thanks :thumbsup: