аюсь создать слайд-шоу с помощью плагина jQuery Cycle, который содержит еще один уровень вложенных слайд-шоу в некоторых слайдах верхнего уровня.

Основные слайды «контейнера» скользят горизонтально, а затем - для слайдов «контейнера», которые содержат более одного изображения с левой стороны, - эти изображения скользят вверх вертикально.

Пример здесь, потому что я представляю, что это трудно визуализировать:http://dl.dropbox.com/u/2890872/js-test/index.html

Вы перейдете ко второму слайду верхнего уровня только до того, как он остановится, даже при том, что есть шесть слайдов верхнего уровня (это моя проблема - второй слайд содержит только одно левое внутреннее изображение, которое останавливает сценарий), но Вы можете увидеть, что это за переходы, и проверить весь код.

Проблема состоит в том, что не все вторичные слайд-шоу имеют более одного изображения, и цикл jQuery завершает себя, если в слайд-шоу есть одно или меньше изображений. Это завершение также завершает слайд-шоу верхнего уровня, так как оно останавливается и запускается в зависимости от того, когда заканчивается вторичное слайд-шоу. Поскольку вторичное слайд-шоу заканчивается только из-за одного «слайда», то следующий внешний слайд верхнего уровня никогда не вызывается. Я не уверен, как адаптировать код, чтобы обойти это.

JS:

<script type="text/javascript">
$(function(){ 
    // init and stop the inner slideshows
    var inners = $('.slide-up').cycle().cycle('stop');

    var slideshow = $('#home-slides').cycle({
        fx: 'scrollHorz',
        speed: 300,
        timeout: 0,
        before: function() {
            // stop all inner slideshows
            inners.cycle('stop');

            // start the new slide's slideshow
            $(this).children().cycle({
                fx: 'scrollUp',
                timeout: 2000,
                autostop: true,
                end: function() {
                    // when inner slideshow ends, advance the outer slideshow
                    slideshow.cycle('next');
                }
            });
        } 
    });
});
</script>

Образец HTML:

<div id="home-slides">
    <div>
        <div class="slide-up">
            <img src="i/home/slideshow/1l-1.jpg" alt="" width="284" height="420" />
            <img src="i/home/slideshow/1l-2.jpg" alt="" width="284" height="420" />
            <img src="i/home/slideshow/1l-3.jpg" alt="" width="284" height="420" />
        </div>
        <img src="i/home/slideshow/1r.png" alt="" width="291" height="420" />
    </div>
    <div>
        <div>
            <img src="i/home/slideshow/2l-1.jpg" alt="" width="284" height="420" />
        </div>
        <img src="i/home/slideshow/2r.jpg" alt="" width="291" height="420" />
    </div>
    <div>
        <div class="slide-up">
            <img src="i/home/slideshow/3l-1.jpg" alt="" width="284" height="420" />
            <img src="i/home/slideshow/3l-2.jpg" alt="" width="284" height="420" />
        </div>
        <img src="i/home/slideshow/3r.png" alt="" width="291" height="420" />
    </div>
    <div>
         …additional slides…
    </div>
</div>

Слайд-шоу заканчивается на втором # home-slides> div, потому что есть только одно изображение. Я попытался удалить вложенность и класс «слайд-ап» из слайдов без внутреннего слайд-шоу, но это не помогает.

Опять же, полную рабочую версию со всем соответствующим кодом можно найти здесь:http://dl.dropbox.com/u/2890872/js-test/index.html

----------- ИЗД. 4/10 - Незначительные обновления и, возможно, лидерство ----------

Я отредактировал код здесь и в примере ссылки, чтобы добавить некоторые детали, которые устраняют первые мысли для устранения неполадок. Теперь только слайды со вторичными слайд-шоу используют класс «слайд-ап».
- Я попытался указать класс «.slide-up» в функции для обратного вызова «end» ('$(this).children('.slide-up').cycle… '), Что предотвращает завершение цикла при слишком малом количестве слайдов, но только при отсутствии элементов!

Самое близкое, что я получил, - это добавление условной проверки к функции в обратном вызове конца: (Я использую длину, чтобы проверить существование скользящего элемента div. Если есть лучший способ, дайте мне знать)

before: function() {
 if ( $(this).children('.slide-up').length != 0 ) {
    // stop all inner slideshows
    inners.cycle('stop');

    // start the new slide's slideshow
    $(this).children('.slide-up').cycle({
        fx: 'scrollUp',
        timeout: 2000,
        autostop: true,
        end: function() {
            // when inner slideshow ends, advance the outer slideshow
            slideshow.cycle('next');
        }
    });
   } else alert('NO INNER SLIDESHOW!');

Это исключает все ошибки и завершения непосредственно из цикла jQuery, но основное слайд-шоу по-прежнему останавливается на слайде без дополнительного слайд-шоу. Я думаю, что нужно вставить что-то в выражение "else", связанное с запуском "slideshow.cycle ('next');", но я не нашел правильный синтаксис, чтобы заставить это работать.

----------- РЕДАКТИРОВАНИЕ № 2 4/10 - ----------

самый последний рабочий пример:http://dl.dropbox.com/u/2890872/js-test/index2.html

Перемещение функции before в ее собственную именованную функцию для сохранения чистоты.

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag) {
     if ( $(this).children('.slide-up').length != 0 ) {
        // stop all inner slideshows
        //inners.cycle('stop');

        // start the new slide's slideshow
        $(this).children('.slide-up').cycle({
            fx: 'scrollUp',
            timeout: 2000,
            autostop: true,
            end: function() {
                // when inner slideshow ends, advance the outer slideshow
                slideshow.cycle('next');
            }
        });
       } 
      // else null;
      else $(this).parent().cycle({ 
        end: function() { slideshow.cycle('next'); }
       });
    } 

Это (оператор else) позволяет слайд-шоу прогрессировать, но оно не сохраняет исходные параметры «слайд-шоу», а просто начинает воспроизведение слайдов верхнего уровня со стандартными стандартными параметрами (исчезает с одного слайда до далее, вместо скольжения, останавливается воспроизведение вторичных слайдов).

Я не понимаю: 1) Как сохранить варианты. (Я думал, именно поэтому вар "слайд-шоу" был создан в первую очередь)

2) Почему еще нужен оператор else - я не понимаю, почему внешние слайды вообще останавливаются, когда условный оператор «.slide-up» не выполняется - я думаю, что внешнее слайд-шоу просто продолжится как обычно.