I'm sure that I am just missing something simple, but I have been using JFLOW Slider and BXSlider on the same page with no problems or conflicting jquery, but now that I have tried adding lightbox to the page as well it screws up both of the other jquery items, allowing only lightbox to function correctly. I have narrowed it down to which section of the code I believe to be causing the issue because when removed, both WOW Slider and BXSlider work correctly again, however the lightbox does not function correctly without this one line of code. However, if I add it back, ONLY lightbox will function and neither of the other two do. The code below is with everything there, the line that seems to be causing the issue is this one: <script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>

I also know that multiple jQuery references can cause issues, but I have tried removing a few of the different .js references and looked for duplicate callings but it hasn't solved the issue.

Here is the code in it's entirety:

HTML Code:
<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>

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

<script src="scripts/jflow.plus.min.js" type="text/javascript"></script>

<script type="text/javascript">

	$(document).ready(function(){

	    $("#myController").jFlow({

			controller: ".jFlowControl", // must be class, use . sign

			slideWrapper : "#jFlowSlider", // must be id, use # sign

			slides: "#mySlides",  // the div where all your sliding divs are nested in

			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			
			effect: "flow", //this is the slide effect (rewind or flow)

			width: "1343px",  // this is the width for the content-slider

			height: "218px",  // this is the height for the content-slider

			duration: 400,  // time in milliseconds to transition one slide
			
			pause: 5000, //time between transitions

			prev: ".jFlowPrev", // must be class, use . sign

			next: ".jFlowNext", // must be class, use . sign

			auto: true	

    });

});

</script>

<link rel="stylesheet" href="lightbox_assets/css/lightbox.css" type="text/css" media="screen" />
[COLOR="#FF0000"]<script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>[/COLOR]
<script src="lightbox_assets/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox_assets/js/lightbox.js" type="text/javascript"></script>

<script src="scripts/jquery.bxslider.min.js"></script>
<link href="styles/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
						  adaptiveHeight: true,
						  adaptiveHeightSpeed: 500,
						  slideWidth: 100,
						  height: 150,
						  minSlides: 1,
						  maxSlides: 8,
						  moveSlides: 1,
						  slideMargin: 15
						
						  });
});
</script>

I'd appreciate any help I can get, I'm newer to using jQuery and while I can get these elements to function fine separately, when combined they seem to be conflicting.

Thank you!