Using Jcarousellite and Fancybox on same slideshow

I'm trying to use fancybox and jcarousellite on the same slideshow. I have gotten both scripts working independently, but when I put them together neither work.

I am thinking it might be the scripts that are conflicting, but I've seen other websites that use both functions.

Here is what I have in my page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
 <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
  <link rel="stylesheet" href="style.css" />
<script type="text/javascript">
 $(document).ready(function() {

  $("a#fancy").fancybox();
 });开发者_C百科
 </script>
   <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
   $(function() {

$(".home").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 1,
speed: 1000,
 auto: 2000,
easing: "easeinout"
});
});
</script>

Then my images are laid out like this:

<div id="slider" class="home" style="margin-top:-30px;">
<ul>
                <li ><a class="fancy" href="image"><img src="image" alt="Modern Wedding Photographer" style="padding:5px; border:0;"/></a></li>
<li ><a class="fancy" href="image"><img src="image" alt="Modern Wedding Photographer" style="padding:5px; border:0;"/></a></li>
<li ><a class="fancy" href="image"><img src="image" alt="Modern Wedding Photographer" style="padding:5px; border:0;"/></a></li>
                  </ul>
               </div>

Can anyone point me in the right direction for a solution? Thanks