jQuery conflict

Question

Hi,

I have a wordpress plugin lightbox2 and a news scroller on my page.

My head section looks like this

<script type="text/javascript" src="wp-content/themes/soundsright/menu.js"></script>
<script type='text/javascript' src='wp-includes/js/prototype.js?ver=1.6'></script>
<script type='text/javascript' src='wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.0'></script>
<script type='text/javascript' src='wp-includes/js/scriptaculous/effects.js?ver=1.8.0'></script>
<script type='text/javascript' src='wp-content/plugins/lightbox-2/lightbox.js?ver=1.8'></script>
<script type='text/javascript' src='wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>

    <!-- begin lightbox scripts -->
    <script type="text/javascript">
    //<![CDATA[
    document.write('<link rel="stylesheet" href="wp-content/plugins/lightbox-2/Themes/Grey/lightbox.css" type="text/css" media="screen" />');
    //]]>
    </script>
    <!-- end lightbox scripts -->


        <!-- SwfObj Plugin version SWFOBJ_VERSION -->
        <script type="text/javascript" src="wp-content/plugins/swfobj/swfobject.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/soundsright/liscroll.js"></script>

<script type="text/javascript">
$(function(){
   $("ul#ticker01").liScroll({travelocity: 0.03});  

});

</script>

As it is now, the news scroller works but not the lightbox plugin. When I remove

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

then the lightbox works but not the news scroller.

I thought removing this jQuery refrence would have solved the problem cause wordpress already loads the same version of jQuery in this line

<script type='text/javascript' src='wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>

Any ideas what I'm doing wrong here?

Answer 1

I think this will be because of the function() clashing, we had something similar recently; you need to more precisely match it to jQuery (basically the $ reference will be owned by prototype or one of the other javascripts so you replace it with jQuery) e.g.

jQuery(function(){

   jQuery("ul#ticker01").liScroll({travelocity: 0.03});  

});

Answer 2

$ is used by both Prototype and jQuery:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Answer 3

Since both JQuery and Prototype use $ sign, use Jquery in non conflict mode

   jQuery.noConflict();

   JQuery(function(){
       JQuery("ul#ticker01").liScroll({travelocity: 0.03});      
   });

and use $ for Prototype