problem with jquery lightbox plug-in

Question

I love this plug-in. I am having an issue and cannot find a solution to it. The site in question is:

http://www.fuzzysiberians.com/index.cfm

My problem is if you click on Katja's picture (she is the flying kitty), and click on the next button, there is nothing coming up.

I am not sure what lightbox is trying to load in there. I triple checked all the image references to make sure the images are in the right folders.

Any ideas?

thanks

Answer 1

The lightbox is trying to load up a blank image. The problem comes because of how you have initialized your lightbox. Your selector is set as $('#gallery a') which is fine in some cases, but inside of your <div id='gallery'> you have a link that doesn't contain an image.

To correct this I suggest the following changes:

initialize your lightbox like this -

$('a.gallery').lightBox();    //This selects all links with class="gallery" and adds them to lightbox

Then for each link on the page you what included in your lightbox add the class gallery

for example

<a href="siberianCats/SiberianCat-9.jpg" class="gallery" style="border:1px solid #8A8DA7" title="Siberian Kitten">
    <img src="siberianCats/SiberianCat-9.jpg" alt="Fuzzy Siberian Cat and Siberian Kitten" title="Fuzzy Siberian Cat and Siberian Kitten"/>
    </a>

---

For extra credit, you could then move the style declaration into your styles.css css file like so:

a.gallery{
border:1px solid #8A8DA7;
}

---

On a side note, you should only use an id 1x per page. Classes are used for non-unique DOM elements.