jQuery.noConflict() fix not working when using jQuery with prototype.js

Asked a question earlier and got a fantastic response, you guys are amazing. The question now is how to properly implement the solution.

I'm attempting to use jQuery and prototype libraries with each other, using the jQuery.noConfict() fix:

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

   <script>

     jQuery.noConflict();

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

 // Use Prototype with $(...), etc.
 $('#lightbox').hide();
   </script>开发者_运维技巧

<script type="text/javascript" src="./js/lightbox.js"></script>
<script type="text/javascript" src="./js/scriptaculous.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>

I understand the principle (that by default, jQuery uses "$" as a shortcut for "jQuery"), and the solution to this looks like it should work. However, when implemented the page comes up as a blank background.

This is a demo of the page, using the current script implementation.

How would one fix this?

---

Well, for one thing, you're linking prototype.js improperly. It should be ./js/prototype.js.

Edit
Also missing a few others: ./js/dragdrop.js ./js/controls.js ./js/slider.js

Then, it looks like you're using jQuery not prototype (though, I don't have any experience with prototype). I looked it up on their site and you pass the id into the $() function, not a css-like/jQuery selector. So where you have $("#slideshow1").hide();, you have to make it jQuery("#slideshow1").hide(); or $("slideshow1").hide(); if it's a prototype function. This goes the same for other scripts down the page.

Edit 2
After you fix the missing JavaScript files, this line: $('slideshow1').hide(); should be jQuery('#slideshow1').hide();.

And these:

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

Should be:

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

---

I think Prototype does $(id), not $(selector) as jQuery does. Also it returns the actual DOM element. So e.g. $('#slideshow1').hide() would be, in Prototype, $('slideshow1').style.visibility = 'hidden', I believe. For such things, jQuery is going to be easier. It looks as though all your $() calls are really jQuery() calls and would need rewriting to the Prototype way to work - or just change $ to jQuery.

Edit: actually, that $ isn't even Prototype... Prototype is $$.