Nested jQuery Cycle slideshows: Why is my thumbnail navigation breaking?

Here is my example.

I have created a portfolio, using FancyBox to launch a lightbox containing nested Cycle slideshows. The thumbnail navigation works fine on the first slideshow, but when you click the link (Heroes for Children) to the second slideshow, it breaks. The HTML is the same, so I am not sure what is going on here. I've reworked this three times, searched for a remedy, but have a hard time finding many examples of nested Cycle slideshows with thumbnail navigation. I was able to find a solution to a different problem I was having, here on Stack Overflow, so I figured this would be a good place to seek help.

Any idea of what's going wrong here?

Here's my javascript:

<!-- Lightbox Javascript -->
<script type="text/javascript">
    $(document).ready(function() {

        function formatTitle(title, currentArray, currentIndex, currentOpts) {
            return '<div id="project-title">' + (title) + '</div>';
        }

        $(".work-thumb").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'titleFormat'       : formatTitle
        });

    });
</script>

<!-- Outer Slider Javascript -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#outer-slider').cycle({ 
            fx:     'scrollUp', 
            timeout: 0, 
            delay:  -2000,
            pager:  '#outer-slider-nav',
            pagerAnchorBuilder: function(idx, slide) {
                // return sel string for existing anchor
                return '#outer-slider-nav li:eq(' + (idx) + ') a';
            }
        });
    });
</script>

<!-- Inner Slider Javascript -->
<script type="text/javascript">
    $(document).ready(function() {
        $('.inner-slider').cycle({ 
            fx:     'scrollLeft', 
            timeout: 6000, 
            pause: 1,
            pager:  '.inner-slider-nav',
            nowrap: false,
            pagerAnchorBuilder: function(idx, slide) {
                // return sel string for existing anchor
                return '.inner-slider-nav li:eq(' + (idx) + ') a';
            }
        });
    });
</script>

And here's my HTML:

<div id="content">

    <a class="work-thumb" href="#lightbox-window" title="Viewpoint Bank"><img src="images/viewpoint1_thumb.jpg" alt="Viewpoint Bank" width="100" height="60" /></a>

    <div style="display: none;">

        <div id="333" style="width:620px;height:519px;">

            <div id="outer-slider">

                <div>

                    <div class="project">

                        <div class="inner-slider">

                          <div class="inner-slide">

                            <img src="images/viewpoint1_large.jpg" alt="Viewpoint Bank" width="620" height="375" />

                          </div>

                          <div class="inner-slide">

                            <img src="images/viewpoint2_large.jpg" alt="Viewpoint Bank" width="620" height="375" />

                          </div>

                          <div class="inner-slide">

                            <img src="images/viewpoint3_large.jpg" alt="Viewpoint Bank" width="620" height="375" />

                          </div>

                        </div><!-- inner-slider -->

                        <ul class="inner-slider-nav">
                          <li><a href="#"><img src="images/viewpoint1_thumb.jpg" alt="Viewpoint Bank" width="100" height="60" /></a></li>
                          <li><a href="#"><img src="images/viewpoint2_thumb.jpg" alt="Viewpoint Bank" width="100" height="60" /></a></li>
                          <li><a href="#"><img src="images/viewpoint3_thumb.开发者_如何转开发jpg" alt="Viewpoint Bank" width="100" height="60" /></a></li>
                        </ul>

                    </div><!-- #viewpoint1 -->

                </div>

                <div>

                    <div class="project">

                        <div class="inner-slider">

                          <div class="inner-slide">

                            <img src="images/heroesforchildren1_large.jpg" alt="Heroes for Children" width="620" height="375" />

                          </div>

                          <div class="inner-slide">

                            <img src="images/heroesforchildren2_large.jpg" alt="Heroes for Children" width="620" height="375" />

                          </div>

                          <div class="inner-slide">

                            <img src="images/heroesforchildren3_large.jpg" alt="Heroes for Children" width="620" height="375" />

                          </div>

                        </div><!-- inner-slider -->

                        <ul class="inner-slider-nav">
                          <li><a href="#"><img src="images/heroesforchildren1_thumb.jpg" alt="Heroes for Children" width="100" height="60" /></a></li>
                          <li><a href="#"><img src="images/heroesforchildren2_thumb.jpg" alt="Heroes for Children" width="100" height="60" /></a></li>
                          <li><a href="#"><img src="images/heroesforchildren3_thumb.jpg" alt="Heroes for Children" width="100" height="60" /></a></li>
                        </ul>

                    </div><!-- #viewpoint2 -->

                </div>

            </div><!-- #outer-slider -->

            <ul id="outer-slider-nav">
              <li><a href="#">Viewpoint Bank</a></li>
              <li><a href="#">Heroes for Children</a></li>
            </ul>

        </div><!-- #lightbox-window -->

    </div><!-- end display none -->

</div><!-- #content -->

I think you must extend the function for the inner sliders with the each(function(){})

$(document).ready(function() {
    $('.inner-slider').each.function() {
        var el = $(this);
        var thispager = el.next('ul.inner-slider-nav');

        /* or try this instead */
        /* var thispager = el.parents('div:eq(0)').children('ul.inner-slider-nav');*/
        /* should work both */

        el.cycle({ 
            fx:     'scrollLeft', 
            timeout: 6000, 
            pause: 1,
            pager:  thispager, /* <-- changed */
            nowrap: false,
            pagerAnchorBuilder: function(idx, slide) {
                // return sel string for existing anchor
                return thispager + ' li:eq(' + (idx) + ') a';
            }
        });
    });
});

The reason of this all is, that you call an element using the class separator, and, mind your script, you have two of them. Which one shall javascript use ? It uses the first one. All this code is not tested at the moment, but your on the right track now.

The same I do on my actual project (currently under construction) http://ferienhaus-fischland-ahrenshoop.de/mini4/ (may be later you have to remove the "mini4/" when project finished) In my case I neede he cycle gallery to be working, if it is used more then once per page, worked out with just one script and using classes instead of IDs.

After I put another eye on your example site I guess, you should stop the inanctive inner slider, because all inner slides are currently running, even if they are invisible. This costs a lot of unnecessary browser activity on javascript.

Better to try another construct with inner and outer slider in one script like

$(document).ready(function() {
    // init and stop the inner slideshows
    var inners = $('.inner-slideshow').cycle().cycle('stop'); // <- the class element
    var slideshow = $('#slideshow').cycle({ // <- the ID element
        fx: 'scrollDown',
        before: function() {
            // stop all inner slideshows
            inners.cycle('stop');
            // start the new slide's slideshow
            $(this).cycle({
                fx: 'scrollRight',
                end: function() {
                }
            });
        }
    });
});

But this does not protect you from using the each(function) as described before.