JS and JQuery Conflict

I'm having a problem where a JS and a JS JQuery file are fighting each other.

I have Lightbox images effect and a JQuery carousel on the same page.

The code for linking the external js is

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

//for the lightbox
<script type="text/javascript" src="elements/js/prototype.js"></script>
<script type="text/javascript" src="elements/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="elements/js/lightbox.js"></script>

//for the carousel
<script type="text/javascript" src="elements/js/jquery.waterwheelCarousel.js"></script>

//If I understand correctly this is suppose to be inserted here to stop the conflict??
<script>
jQuery.noConflict();

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

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

// continuing the code for the carousel
<script type="text/javascript">
$(document).ready(function () {
$("#waterwheelCarousel").waterwheelCarousel("horizontal",{
startingItem: 1
});
});
</script>


With the <script> jQuery.noConflict(); </script> (as shown above) inserted it turns the whole page black.
If I remove the jQuery.noConflict(); part the carousel does not show on the page.
If I remove the lightbox js, the carousel works as it should, but of course the lightbox does not.

I been working with JS and Jquery for just a short while, so not a great understanding of it. I have tried moving around the placement of the jQuery.noConflict(); fix around but it has not worked.
Have I used the correct fix and have I placed it in the correct position?

 

Wrong code at all dude.

Use this:

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

//for the lightbox
<script type="text/javascript" src="elements/js/prototype.js"></script>
<script type="text/javascript" src="elements/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="elements/js/lightbox.js"></script>

//for the carousel 
<script type="text/javascript" src="elements/js/jquery.waterwheelCarousel.js"></script>

//If I understand correctly this is suppose to be inserted here to stop the conflict??
<script type="text/javascript">
var $jQuery = jQuery.noConflict();

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

$jQuery("#waterwheelCarousel").waterwheelCarousel("horizontal",{
startingItem: 1
});
});

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

Code (markup):

Sorry, can not speak for prototype and scriptaculous, never needed (me lubs jQuery).

Try it, should work.

Why not using a jQuery lightbox? There are lots of... would be much easier

 

Thanks CSM but the window still turns black with that code. Am I suppose to replace in the $('someid').hide(); the some id with something I have in my code?
In the mean time I will look into jQuery lightbox and see if I can get that to work.