Prototype.js Conflicts with Jquery.js while using lightbox

niceoneishere
niceoneishere used Ask the Experts™
on
Hello All,
I have a website http://www.foo.com , now i am using jquery.min.js and jmenu.js and jquery.color.js in the template file ( the site is built in dreamweaver cs3).

and in the index.html page i am using lightbox with the following script files
<script type="text/javascript" src="/assets/js/scriptaculous.js?load=effects,builder"></script>
   <script type="text/javascript" src="/assets/js/prototype.js"></script>
   <script type="text/javascript" src="/assets/js/lightbox.js"></script>

and i think both prototype.js and jquery files are conflicting. because before i used the jquery script files the lightbox worked fine.

how can i fix this , that both of these work perfectly.

any help is high appreciated. i am posting the code where the jquery script file in the template file which are located all the way at bottom just before </body> tag

and in the index.html i have the lightbox script file in the header section

thanks
-----------------Template file ------------------------

<!-- Add jQuery From the Google AJAX Libraries --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
 
<!-- jQuery Color Plugin --> 
<script type="text/javascript" src="assets/js/jquery.color.js"></script> 
 
<!-- Import The jQuery Script --> 
<script type="text/javascript" src="assets/js/jMenu.js"></script> 

-------------------------------------------------------------

-------------------------Index.html-------------------------

<!-- InstanceBeginEditable name="head" -->
<script type="text/javascript" src="/assets/js/scriptaculous.js?load=effects,builder"></script>
   <script type="text/javascript" src="/assets/js/prototype.js"></script>
   <script type="text/javascript" src="/assets/js/lightbox.js"></script>
   
<link rel="stylesheet" href="/assets/css/lightbox.css" type="text/css" media="screen" >
<!-- InstanceEndEditable -->

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Jquery and prototype both use the symbol $ which causes the conflict.  There is a work around using jQuery.noConflict();  You then need to use jQuery instead of $.  For example $('someid').hide();
would become jQuery('someid').hide();

You can view the doc on jquery.com here:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Author

Commented:
thanks for replying i have read that but i am not sure in which file would i be replacing $ with jQuery.

thanks

Commented:
You would need to replace $ with jQuery in jQuery.color.js and jMenu.js.  
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
ok so basically i will have to add
<script>
     jQuery.noConflict();
</script>

in the head tag of index.html and

in jMenu.js and jQuery.color.js replace $ with jQuery.

correct,
Thanks once again

Commented:
Correct.  I had to use the same workaround using thickbox (jquery) with lightbox (prototype).

Author

Commented:
not working sir.i tired.
Thanks
Commented:
jQuery.noConflict must be called after all of the libraries have loaded.  Is there a way you can place it directly below <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Author

Commented:
u r great sir, it works and thanks a lot appreciate it.

Commented:
No problem.  Glad I could help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial