Вложенные слайд-шоу jQuery Cycle: Почему навигация по моим эскизам не работает

Question

Вот мой пример .

Я создал портфель, используя FancyBox для запуска лайтбокса, содержащего вложенные слайд-шоу Cycle.Навигация по миниатюрам работает нормально на первом слайд-шоу, но когда вы щелкаете ссылку (Герои для детей) на второй слайд-шоу, она ломается.HTML-код такой же, поэтому я не уверен, что здесь происходит.Я переделывал это три раза, искал лекарство, но мне было трудно найти много примеров вложенных слайд-шоу циклов с навигацией по миниатюрам.Я смог найти решение другой проблемы, которая у меня была, здесь, в Переполнении стека, поэтому я подумал, что это было бы хорошим местом для поиска помощи.

Есть идеи, что здесь происходит не так?

Вот мой 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

После того, как я посмотрю на ваш пример сайта, я думаю, вы должны остановить неактивный внутренний слайдер, потому что все внутренние слайды в настоящее время работают, даже если они невидимы. Это стоит много ненужной активности браузера на 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() {
                }
            });
        }
    });
});

Но это не защищает вас от использования каждой (функции), как описано выше.

Answer 2

Я думаю, что вы должны расширить функцию для внутренних ползунков с каждым (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 /» после завершения проекта) В моем случае я нуждаюсь в том, чтобы работала циклическая галерея, если она используется более одного раза на страницу, работает только с одним сценарием и использует классы вместо идентификаторов.