Why does prototype.js interfere with unrelated javascript operations?

Building a website. When I order my tags like this, LightCycle works but Lightbox doesn't:

Lightcycle works, Lightbox doesn't:

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

When I order it like this开发者_运维知识库, Lightbox works but LightCycle doesn't:

Lightbox works, LightCycle doesn't:

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

Frustrating.

You're having a conflict because both libraries use the $ shortcut. Look into the noconflict feature of jQuery or the equivalent of prototype.

You can read more here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Because they use the same $ shorthand.

Try the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="./js/prototype.js"></script>

Does a call to jQuery.noConflict() fix it? You can also give jQuery an alias within your on functions if you miss the $ shortcut:

 var $j = jQuery.noConflict();

References:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

http://samsami2u.wordpress.com/2009/03/14/prototypejs-jqueryjs-conflict-and-resolution/

So using Surreal Dreams recontamination, I implemented this:

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

   <script>
     var $j = jQuery.noConflict();

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

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


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

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js"></script>

<script type="text/javascript">

$(function() {
    $('#slideshow1').cycle({
        delay: 2000,
        speed: 1000,
    });


});

</script>

The next question that springs to mind is what to replace 'someid' with. I'm assuming '#slideshow1'. But what displays when I do this is just a plain black page. Annoying.