Question

这是my example。

我创建了一个投资组合，使用FancyBox启动包含嵌套Cycle幻灯片的灯箱。缩略图导航在第一张幻灯片中正常工作，但当您点击第二张幻灯片的链接（儿童英雄）时，它会中断。 HTML是一样的，所以我不确定这里发生了什么。我已经重做了三次，寻找补救措施，但很难找到许多带缩略图导航的嵌套Cycle幻灯片示例。我能够找到解决我遇到的另一个问题的方法，这里是Stack Overflow，所以我认为这将是一个寻求帮助的好地方。

知道这里出了什么问题吗？

这是我的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>

这是我的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 -->

Answer 1

我认为你必须使用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';
            }
        });
    });
});

这一切的原因是，您使用类分隔符调用元素，并且注意您的脚本，您有两个。 javascript使用哪一个？它使用第一个。目前尚未对所有这些代码进行测试，但您现在正在进行测试。

我在实际项目上的表现（目前正在建设中） http://ferienhaus-fischland-ahrenshoop.de/mini4/（项目完成后，您可能需要删除“mini4 /”）在我的情况下，我需要循环库来工作，如果每页使用多次，只用一个脚本并使用类而不是ID。

Answer 2

在我再次关注你的示例网站之后，我猜你应该停止无用的内部滑块，因为所有内部幻灯片当前都在运行，即使它们是不可见的。这会在javascript上花费大量不必要的浏览器活动。

最好在一个脚本中尝试使用内部和外部滑块的另一个构造，如

$(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() {
                }
            });
        }
    });
});

但这并不能保护您不使用前面描述的每个（功能）。

嵌套的jQuery Cycle幻灯片：为什么我的缩略图导航会破坏？

2 个答案: