A picture slider/lightbox2 issue

Question

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
Plus here is the html and css code
<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>
        <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>
        <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>
        <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>
        <li><img class="slider" /><a href="Gallery/images/small/pic6.png" rel="lightbox"><img src="Gallery/images/large/Maggianos.jpg"/></a></li>
        <li><img class="slider" /><a href="Gallery/images/small/pic7.png" rel="lightbox"><img src="Gallery/images/large/Kohls.jpg"/></a></li>
        <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>
        <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>
        <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>
        <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>
        <!--images goes here/lightbox-->
        </ul>
           </div><!--end of container"-->
</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.

Answer 1

It looks like you are trying to combine NivoSlider with LightBox2 - I would doubt very much if this would work! You would need to find a lightbox script that also doubles as a slideshow.
With that being said, from a user perspective I would hate to have a "gallery" with just a rotating slideshow which I need to click. I would expect to see a gallery of images where I can click each one and enlarge it, and THEN scroll through them one by one if I wanted to. This is exactly what lightbox2 offers - you just need to read their instructions on how to implement it.
Eg:
Change this:
<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>
To this:
<li><a href="Gallery/images/large/Atlantis-Resort-Atlantis-Resort-1.jpg" rel="lightbox[Gallery]" title="atlantis"><img src="Gallery/images/small/pic1.png" alt="atlantis"/></a></li>
You will notice the addition of "title" in the <a> tag - this is where your caption is - not in the ALT. Also, the rel="lightbox[Gallery]" tells the browser to open the image using LightBox but also to show all connected images with [Gallery]. In other words, to show all the images in a gallery in the one pop-up slideshow, add [Gallery] to them all. This allows you to group certain images together.
Lastly, the image reference inside the <a> tag should be the LARGE image, not the thumbnail. Your <img> src should then be the thumbnail.
Good luck!
Rik
EDIT:// In addition to this, you need to modify your lightbox.js file so it can show the next/prev/close icons. You have obviously moved them from the default location which is in a folder images/.
function LightboxOptions() {
      this.fileLoadingImage = 'images/loading.gif';
      this.fileCloseImage = 'images/close.png';
And then again in the lightbox.css file
/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../images/prev.png) left 48% no-repeat;
/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../images/next.png) right 48% no-repeat;