Jquery-Cycle —mehrere verschachtelte Diashows und Zyklus beenden

Ich versuche, erstellen einer Diashow über das jQuery-Cycle-plugin, das enthält eine weitere Ebene der verschachtelten Diashows in einigen der top-level-Folien.

Die wichtigsten "container" Folien schieben Sie horizontal, und dann—für die "container" - Folien, die mehr als ein Bild auf der linken Seite—die Bilder schieben sich senkrecht.

Beispiel hier, weil ich mir vorstellen kann ist es schwer zu visualisieren:
http://dl.dropbox.com/u/2890872/js-test/index.html

Du bekommst nur auf die zweite top-level-Folie, bevor es Stoppt, dachte sogar, es gibt sechs top-level-Folien (das ist mein Problem—die zweite Folie enthält nur eine linke innere Bild, die beendet das Skript), aber Sie können sehen, was der beabsichtigten übergänge und schauen Sie sich den gesamten code.

Das problem ist, dass nicht alle sekundären Diashows mehr als ein Bild, und jQuery Zyklus beendet sich selbst, wenn es eines oder weniger Bilder in einer Diashow. Diese Kündigung endet auch die top-level-Diashow, da es gestoppt und dann wieder gestartet, basierend auf, wenn die sekundäre Diashow endet. Da die sekundären Diashow wird beendet durch nur eine "Folie", dann die nächste äußere top-level-Folie wird nie genannt. Ich bin mir nicht sicher, wie Sie Sie zum anpassen der code, dies zu umgehen.

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>

Einer Stichprobe von 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>

Die Diashow endet an der zweiten #Heimat-Folien > div, weil es nur ein Bild.
Ich habe versucht, das entfernen Sie die Verschachtelung und die "slide-up" - Klasse aus den Folien mit keine innen-slideshow, aber das hilft nicht.

Wieder, voll funktionsfähige version mit allen entsprechenden code finden Sie hier: http://dl.dropbox.com/u/2890872/js-test/index.html

----------- BEARBEITET 4/10 - Kleinere Updates und eventuell einen Vorsprung ----------

Ich habe bearbeitet den code hier und auf den Beispiel-link zum hinzufügen von einige details, die elmininate die ersten Gedanken bei der Fehlersuche. Jetzt müssen nur noch die Folien mit sekundären Diashows verwenden Sie die Klasse "slide-up".

- Ich habe versucht, die Angabe der '.slide-up' - Klasse in der Funktion für die "Ende" - callback ('$(this).children('.slide-up').cycle...'), die nicht verhindern, dass der Zyklus zu beenden und zu wenig rutschen, aber das macht es nur beenden für unübertroffene Elemente!

Der nächste, den ich bekommen habe ist durch hinzufügen einer bedingten überprüfen, um die Funktion in der end-callback:
(Ich bin mit der Länge zu überprüfen, die Existenz einer slide-up-div. Wenn es einen besseren Weg, lassen Sie mich wissen)

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

Dieser beseitigt alle Fehler und Abbrüche direkt von jQuery Zyklus, aber die Haupt Diashow Stoppt noch in der Folie, ohne eine sekundäre Diashow. Ich denke, dass brauchen, um etwas in die "else" - Anweisung Verwandte zu feuern " - Diashow.Zyklus('weiter');", aber ich habe nicht herausgefunden, die richtige syntax zu erhalten, um zu arbeiten.

----------- BEARBEITEN #2 4/10 - ----------

jüngsten arbeiten Beispiel: http://dl.dropbox.com/u/2890872/js-test/index2.html

Verschieben der vor-Funktion in seine eigene benannte Funktion, um die Dinge sauberer.

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

Diese (else-Anweisung) können Sie die Diashow, um die Fortschritte, aber es hat nicht die Erhaltung der ursprünglichen 'slideshow' - Optionen, und nur startet die Wiedergabe der top-level-Folien mit Standard-out-of-the-box-Optionen (verblasst von einer Folie zur nächsten, anstatt zu gleiten, hält die Wiedergabe an sekundären Folien).

Verstehe ich nicht:
1) Wie erhalten Sie den Optionen. (Ich dachte, das war der Grund, warum die var "Diashow" erstellt wurde, in den ersten Platz)

2) Warum eine else-Anweisung ist sogar notwendig—ich verstehe nicht, warum die äußeren Folien sind halt an alle wenn der bedingte '.slide-up " - Anweisung nicht ausgeführt wird— ich würde denken, die äußeren slideshow würde einfach ganz normal weiter.