I have built a portfolio that is basically a page of thumbnails (client logos). When you click a thumbnail, it spawns a lightbox (FancyBox) with nested slideshows, built using jQuery Scrollable (from jQuery Tools). The slideshow features thumbnail navigation that allows you to navigate within the current category, and a text-based category navigation below. The thumbnail navigation slides through the images horizontally, and the text-based navigation slides through the categories vertically.
Everything works fine, as long as I only have one slideshow displayed. As soon as I have multiple slideshows displayed, it appears the text-based navigation gets confused, and can't figure out which slideshow it is in.
Please see my example, here: [url removed, login to view]
Click on the "Ward Parkway Center" logo on the bottom row, second from the right. The only other scrollable gallery being displayed on the page is the "Reserve", second row, second from the right.
I am using WordPress with some custom fields and arrays to display the content.
The thumbnail navigation works as expected, however the main, text navigation below it fails. My thoughts are that the problem is that the main navigation is not within the same div as the scrollable galleries. That said, I can not figure out how I could change it to be within the same div.
I am looking for someone with more jQuery and PHP experience, that can get the portfolio to function properly, with each thumbnail launching the nested slideshow with category and thumbnail navigation. The functionality is all there, just looking for a way to fix this bug...should be fairly simple to someone with more experience.
I have attached the wordpress page template file, to give you an idea of what's going on. I will provide more to anyone interested.