asked on

Prototype.js Conflicts with Jquery.js while using lightbox

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

ASKER CERTIFIED SOLUTION

jrtwig

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tammu

ASKER

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

thanks

jrtwig

You would need to replace $ with jQuery in jQuery.color.js and jMenu.js.

Tammu

ASKER

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

jrtwig

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

Tammu

ASKER

not working sir.i tired.
Thanks

SOLUTION

jrtwig

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tammu

ASKER

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

jrtwig

No problem. Glad I could help.