JQuery Cycle -multiple вложенные слайд-шоу и завершение цикла

Question

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

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

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

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

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

В ЯШ:

<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> 

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

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

----------- EDITED 4/10 - Незначительные обновления и, возможно, свинцовый ---- ------

Я отредактировал код здесь и на ссылке примера, чтобы добавить некоторые детали, которые elmininate первые мысли для устранения неполадок. Теперь только слайды со вторичными слайд-шоу используют класс «slide-up».
- Я попытался указать класс «.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 »)», но я не понял правильный синтаксис, чтобы заставить его работать.

----------- EDIT # 2 4/10 - ----------

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

Перемещение перед функцией в свою именованную функцию, чтобы держать вещи чище.

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'); } 
     }); 
    } 

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

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

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

Answer 1

Друг facebook решил его! Спасибо, друг на Facebook!

var slideshow = $('#home-slides').cycle({ 
    fx: 'scrollHorz', 
    speed: 300, 
    timeout: 0, 
    before: function(curElement, nextElement, options, forwardFlag) { 
     if($(nextElement).children('.slide-up').length != 0) { 
      $(nextElement).children('.slide-up').cycle({ 
       fx: 'scrollUp', 
       timeout: 2000, 
       autostop: true, 
       end: function() { slideshow.cycle('next'); } 
      }); 
     } 
     else { 
      setTimeout(function(){ slideshow.cycle('next'); }, 2000); 
     } 
    } 
}); 

Работа здесь примера: http://dl.dropbox.com/u/2890872/js-test/index3.html мне нужно изучить цикл немного больше и изменения, которые он сделал, чтобы полностью понять роль «nextElement» в этом коде, но это, безусловно, работает!

Answer 2

Проверьте этот подход поможет вам: http://www.devcha.com/2010/05/fixed-cycle-terminating-too-few-slides.html

Вы проверили этот вопрос ... выглядит аналогичная проблема, но другой подход: Nested jQuery Cycle?

Answer 3

После того, как я «наградил» плагин цикла как лучший и самый простой плагин для слайд-шоу, я положил на него больше глаз, сделал несколько экспериментов и провел несколько часов с ним. Результаты: 1. цикл цикла («стоп») так же, как только цикл («стоп») никогда не работал должным образом, он останавливает внутренние слайд-шоу после каждого второго содержимого. Я изменил его на один цикл ({timeout: 0}) ... который я действительно не понимаю, но он работает абсолютно нормально, в том числе обзоры firebug по активности js. 2. Поскольку мне было нужно, чтобы он работал не только с одним использованием на странице, но и с возможностью автоматического решения, если элементы управления нужны или нет, поэтому я изменил пару вещей и поместил все js в $ (документ) .ready (функция() {} в заголовке страницы. Первый .inner-слайд-шоу получает дополнительный класс = «активный» из серверной PHP скрипта.

код теперь выглядит следующим образом, что

//-----------------jquery cycle plugin modified by Michael Gerner, ddlab, 2012-01-15--------------- 
$('.slideshow').each(function(){ 

    var sl = $(this); 
    var sl_index = sl.index('.slideshow'); 
    var allinner = sl.find('.inner-slideshow'); 
    var firstinner = sl.children('.inner-slideshow:eq(0)'); 

    //----settings outer slideshow 
    var outerfx = 'scrollHorz'; 
    var outerspeed = 500; 
    var outertimeout = 0; 
    var outerprev = '#sl'+sl_index+'prev'; 
    var outernext = '#sl'+sl_index+'next'; 

    //----settings inner slideshow 
    var innerfx = 'fade'; 
    var innerspeed = 2000; 
    var innertimeout = 6000; 

    if (allinner.size() > 1) { //---------more than one inner slideshow 
     var setcontrols = '<div class="slideshow-controls"><a class="prev" id="sl'+sl_index+'prev" href="#"></a> <a class="next" id="sl'+sl_index+'next" href="#"></a></div>'; 
     sl.after(setcontrols); 
     var controls_a = sl.find('.slideshow-controls a'); 

     controls_a.click(function(){ 
      var activeinners = sl.find('.active'); 
      activeinners.each(function(){ 
       $(this).removeClass('active').cycle({timeout:0}); 
      }); 
     }); 

     sl.cycle({ 
      fx:outerfx, 
      speed:outerspeed, 
      timeout:outertimeout, 
      prev:outerprev, 
      next:outernext, 
      before:function(){ 
       var activeinners = sl.find('.active'); 
       activeinners.each(function(){ 
        $(this).removeClass('active').cycle({timeout:0}); 
       }); 
      }, 
      after:function(){ 
       $(this).addClass('active').cycle({ 
        fx:innerfx, 
        speed:innerspeed, 
        timeout:innertimeout, 
        autostop: true, 
        end: function() { sl.cycle('next'); } 
       }); 
      } 
     }); 
    } 
    else { //------------just one inner slideshow 
     firstinner.cycle({ 
      fx:innerfx, 
      speed:innerspeed, 
      timeout:innertimeout 
     }); 
    } 
}); 
//-----------------jquery cycle plugin modified by Michael Gerner, ddlab, 2012-01-15--------------- 

Теперь я доволен тем, что загрузка браузера на js чрезвычайно мала, что я хочу указать как важное для мобильных устройств, и, наконец, я добавил некоторые инструменты редактирования интерфейса, такие как html5upload и jq-filemanager , который используется для владельца e для управления содержимым галереи.

Спасибо за все предыдущие отзывы и Tuts, которые помогли мне много, чтобы получить этот трек :-) Вы можете найти легкий скриншот изображения (26Kb) здесь http://ddlab.de/screenshots/cycle_gallery.jpg

Answer 4

Я загрузил рабочий пример здесь http://ferienhaus-fischland-ahrenshoop.de/mini4/ После завершения этого проекта в ближайшем будущем вы найдете галерею в любом месте на этой странице http://ferienhaus-fischland-ahrenshoop.de, вероятно, на стартовой странице и других.