A picture slider/lightbox2 issue

programming web dev
1

I am creating a picture slider show for someone, 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 also it does not show the caption of the image. Here is the link to the site

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

<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><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>
<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>

    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic3.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/Guitar-Center-Stores.jpg" alt="guitar"/&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic4.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/IMG_0096.jpg" alt="floor"/&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic5.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/J-C-Penney-Store-Front.jpg"/&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic6.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/Maggianos.jpg"/&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic7.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/Kohls.jpg"/&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic8.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/Portfino-Bay-Hotel-villa-pool.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic9.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/Stein-Mart-Sales-Floor.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic10.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/The-Westin-Charlotte-NC-indoor-pool.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;


    &lt;li&gt;&lt;img class="slider" /&gt;&lt;a href="Gallery/images/small/pic11.png" rel="lightbox"&gt;&lt;img src="Gallery/images/large/The-Westin-Charlotte-NC-Lounge.jpg"/&gt;&lt;/a&gt;&lt;/ li&gt;


    &lt;!--images goes here/lightbox--&gt;
    &lt;/ul&gt;
       &lt;/div&gt;&lt;!--end of container"--&gt;

</div><!–end of slider–>

<!–Sliding Photo Gallery–>


#container {
          position:relative;
          margin-left:50px;
          margin-right:50px;
          margin-top:50px;
          width:700px;
 
 
}
 
 
 
 
#prev{
          position:absolute;
          top: 175px;
          left:-20px;
          z-index:10;
}
 
 
 
 
#next{
          position:absolute;
          top: 175px;
          right:-21px;
          z-index:10;
}
 
 
 
 
.slider{
          width: 700px;
          height:400px;
          border:1px solid #000;
 
 
}

Your help will be greatly appreciated.