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:


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




  15. <script type="text/javascript" src="jquery-lightbox-0/js/jquery.js"></script>
  16. <script type="text/javascript" src="jquery-lightbox-0/js/jquery.lightbox-0.4.js"></script>
  17. <script type="text/javascript">
  18.     $(function() {
  19.         $('#content_middle a').lightBox();
  20.     });
  21. </script>


  22. <!--javascript-->





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

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

  27. <!--  initialize the slideshow when the DOM is ready -->
  28. <script type="text/javascript">
  29. $(document).ready(function() {
  30.   $('#s4').after('<div id="nav">').cycle({ 
  31.     fx:     'scrollHorz', 
  32.     speed:  'slow', 
  33.     timeout: 3000, 
  34.     pager:  '#nav',
  35. pagerAnchorBuilder: function(index, el) {
  36.         return '<a href="#"><img src="jquery.cycle/Images/blank.png"> </a>'; // whatever markup you want
  37.     }
  38. });
  39. });


  40. </script>



  41. </head>

  42. <body>
  43. <div id="wrapper">
  44.   
  45.   <div id="site_title"></div>
  46.   
  47.   <div id="menu">
  48. <ul id="navigation">
  49.      <li id="navigation-1"><a href="index.html" title="Home"><span>Home</span></a></li>
  50. <li id="navigation-2"><a href="portfolio.html" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  51. <li id="navigation-3"><a href="#" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  52. <li id="navigation-4"><a href="#" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  53. <li id="navigation-5"><a href="#" title="Lorem Ipsum"><span>Lorem Ipsum</span></a></li>
  54. </ul

  55.   
  56. ></div>
  57.   
  58.   <div id="content_top_round">
  59.   </div>
  60.   
  61.   <div id="content_middle">
  62.   
  63. <a href="jquery-lightbox-0/photos/image1.jpg"><img src="jquery-lightbox-0/photos/sample1.jpg" width="246" height="123"  alt="" /></a>

  64.             
  65.   
  66.   </div>
  67.   <div id="content_bottom_round"></div>
  68.   <div id="temp_spacer"></div>
  69.   
  70.   
  71.   
  72.   
  73.   <div id="footer">© 2010 Copyright sitename. All Rights Reserved.</div>
  74.   
  75. </div>
  76. </body>
  77. </html>
Can someone tell me why my lightbox is not coming up and how I can get it to come up?