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" 

 

http://www.rodriguezstudios.com/division9/gallery.html

 

Here is the html, jquery,l and css code

html

2. <div id="information">
3.   <h1>Gallery</h1>
4.  <div id="container">
5.   <img id="prev" class="prev" src="Gallery/buttons/prev.png" /><img id="next" class="next" src="Gallery/buttons/next.png"/>
6.   <div class="slider">
7.     <ul>
8.     <li><img class="slider" /><a href="Gallery/images/small/pic1.png" rel="lightbox"><img src="Gallery/images/large/Atlantis-Resort-Atlantis-Resort-1.jpg" alt="atlantis"/></a></li> 
9.         <li><img class="slider" /><a href="Gallery/images/small/pic2.png" rel="lightbox"><img src="Gallery/images/large/Atlantis-Resort-Lobby.jpg" alt="Lobby"/></a></li>
10.         
11.         <li><img class="slider" /><a href="Gallery/images/small/pic3.png" rel="lightbox"><img src="Gallery/images/large/Guitar-Center-Stores.jpg" alt="guitar"/></a></li>
12.         
13.         <li><img class="slider" /><a href="Gallery/images/small/pic4.png" rel="lightbox"><img src="Gallery/images/large/IMG_0096.jpg" alt="floor"/></a></li>
14.         
15.         <li><img class="slider" /><a href="Gallery/images/small/pic5.png" rel="lightbox"><img src="Gallery/images/large/J-C-Penney-Store-Front.jpg"/></a></li>
16.         
17.         <li><img class="slider" /><a href="Gallery/images/small/pic6.png" rel="lightbox"><img src="Gallery/images/large/Maggianos.jpg"/></a></li>
18.         
19.         <li><img class="slider" /><a href="Gallery/images/small/pic7.png" rel="lightbox"><img src="Gallery/images/large/Kohls.jpg"/></a></li>
20.         
21.         <li><img class="slider" /><a href="Gallery/images/small/pic8.png" rel="lightbox"><img src="Gallery/images/large/Portfino-Bay-Hotel-villa-pool.jpg" /></a></li>
22.         
23.         <li><img class="slider" /><a href="Gallery/images/small/pic9.png" rel="lightbox"><img src="Gallery/images/large/Stein-Mart-Sales-Floor.jpg" /></a></li>
24.         
25.         <li><img class="slider" /><a href="Gallery/images/small/pic10.png" rel="lightbox"><img src="Gallery/images/large/The-Westin-Charlotte-NC-indoor-pool.jpg" /></a></li>
26.         
27.         <li><img class="slider" /><a href="Gallery/images/small/pic11.png" rel="lightbox"><img src="Gallery/images/large/The-Westin-Charlotte-NC-Lounge.jpg"/></a></li>
28.         
29.         <!--images goes here/lightbox-->
30.         </ul>
31. </div><!--end of container"-->
32.  </div><!--end of slider-->

jquery

3. <script type="text/javascript">
4. $(function() {
6. $(".slider").jslider({
7. btnNext: ".next",
8. btnPrev: ".prev"
10. })
11. });
12. 
    
13. </script>

css

2. <!--Sliding Photo Gallery-->
3. 
   
4. #container {
5. position:relative;
6. margin-left:50px;
7. margin-right:50px;
8. margin-top:50px;
9. width:700px;
11. }
12. 
    
13. #prev{
14. position:absolute;
15. top: 175px;
16. left:-20px;
17. z-index:10;
18. }
19. 
    
20. #next{
21. position:absolute;
22. top: 175px;
23. right:-21px;
24. z-index:10;
25. }
26. 
    
27. .slider{
28. width: 700px;
29. height:400px;
30. border:1px solid #000;
32. }
33. 
    
34. Your help will be greatly appreciated. Thanks in advanced!