jquery-lightbox strange behavior (won't advance to next/prev image)

I'm having two behavioral issues that I can't overcome. First, I can't successfully scroll through images. When I click the Next/Prev buttons within the lightbox, it just stays on the current image.

Additionally, if I click squarely in the middle of the lightbox image, it closes.

$(function(){


$('#photos a').lightBox({fixedNavigation:true, imageBtnPrev:'{{site}}media/imageslightbox-btn-prev.gif',imageBtnNext:'{{site}}media/images/lightbox-btn-next.gif',containerResizeSpeed:350,});

});

So I've tried this with and without the "fixedNavigation:true" parameter.

My markup is as follows:

  <div id="photos">
        <ul>
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img4.jpg" width="185" height="110" alt="Thumb" /></a></li> 
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img5.jpg" width="185" height="110" alt="Thumb" /></a></li>
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site开发者_StackOverflow社区}}media/apt-img6.jpg" width="185" height="110" alt="Thumb" /></a></li>
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img7.jpg" width="185" height="110" alt="Thumb" /></a></li>
        </ul>
    </div>

thanks for any help!

I found to problem in your script, but I'm not sure it solve your problem.

1. You have a extra comma in your javascript. It will cause issue in IE. It should be:

   $('#photos a').lightBox({fixedNavigation:true, imageBtnPrev:'{{site}}media/imageslightbox-btn-prev.gif',imageBtnNext:'{{site}}media/images/lightbox-btn-next.gif',containerResizeSpeed:350});
   

2. In your html code, you load the sample image for all the thumbnails. It should be:

    <div id="photos">
               <ul>
                   <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img4.jpg" width="185" height="110" alt="Thumb" /></a></li> 
                   <li><a href="{{site}}media/apt-img5.jpg"><img src="{{site}}media/apt-img5.jpg" width="185" height="110" alt="Thumb" /></a></li>
                   <li><a href="{{site}}media/apt-img6.jpg"><img src="{{site}}media/apt-img6.jpg" width="185" height="110" alt="Thumb" /></a></li>
                   <li><a href="{{site}}media/apt-img7.jpg"><img src="{{site}}media/apt-img7.jpg" width="185" height="110" alt="Thumb" /></a></li>
               </ul>
           </div>
   

Brendan - It looks like your original hrefs were all pointing to the same (first) image and YNhat corrected that. If you copied/pasted his markup, that's likely the original reason for the problem.