[atlfan]

I am creating a picture slider show for someone using jquery, it has a previous and next button. Here is also what i'm trying to acommplish. Whenever the user ciicks on the image, it enlarge the image. I am using lightbox2. Now, I have no idea why the slider is not workin. the image will "enlarge" but here is the link below to see what's going on.

http://www.rodriguez...n9/gallery.html

Here is the html, css, jquery code

<div id="information">
  <h1>Gallery</h1>
 <div id="container">
 	<img id="prev" class="prev" src="Gallery/buttons/prev.png" /><img id="next" class="next" src="Gallery/buttons/next.png"/>
 	<div class="slider">
    <ul>
    	<li><a href="Gallery/images/large/Atlantis-Resort-Atlantis-Resort-1.jpg" rel="lightbox[Gallery]"  title="Atlantis Resort"><img src="Gallery/images/small/pic1.png" alt="atlantis"/></a></li>
        
        <li><a href="Gallery/images/large/Atlantis-Resort-Lobby.jpg" rel="lightbox[Gallery]" title="Atlantis Resort Lobby"><img src="Gallery/images/small/pic2.png" alt="lobby"/></a></li>
        
        
        <li><a href="Gallery/images/large/Guitar-Center-Stores.jpg" rel="lightbox[Gallery]" title="Guitar Center Stores"><img src="Gallery/images/small/pic3.png" alt="Guitar Store"/></a></li>

  </ul>
	 </div><!--end of container"-->
 </div><!--end of slider-->
</div>

<script type="text/javascript">
$(function() {
	
	$(".slider").jslider({
		btnNext: ".next",
		btnPrev: ".prev"
		
	})
});

</script>

#container {
	position:relative;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	width:750px;
	height:450px;
	
}

#prev{
	position:absolute;
	top: 175px;
	left:-20px;
	z-index:10;
}

#next{
	position:absolute;
	top: 175px;
	right:-21px;
	z-index:10;
}

.slider{
	width: 750px;
	height:450px;
	border:1px solid #000;
	
}

Your help would be greatly appreciated!