jquery light box wont work need help to complete portfolio website.new to jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="portfolio.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="magicalHover-01beta2.css"/>
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#workcontent a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul id="nav">
<li id="nav-home"><a href="index.html"><span>Home<span></a></li>
<li id="nav-about"><a href="about.html"><span>About<span></a></li>
<li id="nav-portfolio"><a href="#"><span>Portfolio<span></a></li>
<li id="nav-contact"><a href="#"><span>Contact<span></a></li>
</ul>
</div>
<div id="logo">
<img src="logo.png" width="318" height="85" alt="daryl_boothe's_logo" />
</div>
<div id="workcontent">
<ul class="thumb">
<li><a href= "worklargeimage1.png";><img src="workthumbnail1.png" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail2.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail3.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail4.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail5.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail6.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail7.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail8.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail9.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail10.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail11.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail12.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail3.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail4.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail5.jpg" alt="" /></a></li>
<li><a href="#"><img src="workthumbnail6.jpg" alt="" /></a></li>
<li><a href="#"><img src="image6.png" alt="" /></a></li>
<li><a href="#"><img src="image2.png" alt="" width="102" height="112" /></a></li>
<li><a href="#"><img src="workthumbnail9.jpg" alt="" width="102" height="112" /></a></li>
<li><a href="#"> <img src="workthumbnail20.jpg" alt="" /></a></li>
</ul>
</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<div id="contact3">
</div>
<div id="socialmedia2">
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="magicalHover-01beta2.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.thumb li').magicalHover({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>
</body>
</html>