Can someone help me with the jquery lightbox plugin?

Can someone help me with the jquery lightbox plugin?

I am using this:  http://leandrovieira.com/projects/jquery/lightbox/

I put everything in the page, but the box does not come up, it just links directly to the image.

Here is the code I am using:


  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>template_1</title>
  7. <style type="text/css">
  8. body {
  9. background-image: url(templates/bg_repeater.jpg);
  10. background-repeat: repeat;
  11. }td img {display: block;}
  12. </style>
  13. <link href="css/main.css" rel="stylesheet" type="text/css" />
  14. <link href="jquery.cycle/css/cycle.css" rel="stylesheet" type="text/css" />
  15. <link rel="stylesheet" type="text/css" href="jquery-lightbox-0/css/jquery.lightbox-0.5.css" media="screen" />




  20. <script type="text/javascript" src="jquery-lightbox-0/js/jquery.js"></script>
  21. <script type="text/javascript" src="jquery-lightbox-0/js/jquery.lightbox-0.4.js"></script>
  22. <script type="text/javascript">
  23.     $(function() {
  24.         $('#content_middle a').lightBox();
  25.     });
  26. </script>


  29. <!--javascript-->





  35. <!-- include jQuery library -->
  36. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

  38. <!-- include Cycle plugin -->
  39. <script type="text/javascript" src="jquery.cycle/jquery.cycle.all.min.js"></script>

  41. <!--  initialize the slideshow when the DOM is ready -->
  42. <script type="text/javascript">
  43. $(document).ready(function() {
  44.   $('#s4').after('<div id="nav">').cycle({ 
  45.     fx:     'scrollHorz', 
  46.     speed:  'slow', 
  47.     timeout: 3000, 
  48.     pager:  '#nav',
  49. pagerAnchorBuilder: function(index, el) {
  50.         return '<a href="#"><img src="jquery.cycle/Images/blank.png"> </a>'; // whatever markup you want
  51.     }
  52. });
  53. });


  56. </script>



  60. </head>

  62. <body>
  63. <div id="wrapper">
  64.   
  65.   <div id="site_title"></div>
  66.   
  67.   <div id="menu">
  68. <ul id="navigation">
  69.      <li id="navigation-1"><a href="index.html" title="Home"><span>Home</span></a></li>
  70. <li id="navigation-2"><a href="portfolio.html" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  71. <li id="navigation-3"><a href="#" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  72. <li id="navigation-4"><a href="#" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  73. <li id="navigation-5"><a href="#" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  74. </ul

  76.   
  77. ></div>
  78.   
  79.   <div id="content_top_round">
  80.   </div>
  81.   
  82.   <div id="content_middle">
  83.   
  84. <a href="jquery-lightbox-0/photos/image1.jpg"><img src="jquery-lightbox-0/photos/sample1.jpg" width="246" height="123"  alt="" /></a>

  86.             
  87.   
  88.   </div>
  89.   <div id="content_bottom_round"></div>
  90.   <div id="temp_spacer"></div>
  91.   
  92.   
  93.   
  94.   
  95.   <div id="footer">© 2010 Copyright sitename. All Rights Reserved.</div>
  96.   
  97. </div>
  98. </body>
  99. </html>
Can someone tell me why my lightbox is not coming up and how I can get it to come up?