hey guys/girls.
need some help and advice on some javascripts.
i know about java, but dont fully understand any of it.

im wanting to run a S3Slider on the top of the page, automatically scrolling though several images, and run Lightbox 2 on the same page (enlarging images).
these 2 programs are running on separate images.
all of the code is written and linked. everything works.

i have 2 chunks of javascript that im using to work the Slider and Lightbox.

This is the coding......
<script type="text/javascript" src="js/prototype.js"></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">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 7000
});
});
</script>


Blue = Lightbox 2 code.
Red = S3Slider code.

my problem is that my page refuses to run both of these codes at the same time.
if i put the lightbox coding underneath the S3Slider code, then the lightbox will work.
if i put the lightbox coding above the S3Slider code, then the S3Slider works and not the Lightbox.
so really, anything on the bottom works, anything on the top dosnt work.

Why is this??

this is the page that im working on. the page isnt finished yet.
herculestrommels.com/new/mobile.html (cant post a link since this site dosnt allow me to do so right now, too new)

any help would be awesome because i have no idea why the code is doing is.