Intento crear una presentación de diapositivas con el complemento jQuery Cycle que contiene otro nivel de presentaciones de diapositivas anidadas en algunas de las diapositivas de nivel superior.

Las diapositivas del "contenedor" principal se deslizan horizontalmente y luego, para las diapositivas del "contenedor" que contienen más de una imagen en el lado izquierdo, esas imágenes se deslizan verticalmente hacia arriba.

Muestra aquí, porque imagino que es difícil de visualizar:http: //dl.dropbox.com/u/2890872/js-test/index.htm

Solo llegará a la segunda diapositiva de nivel superior antes de que se detenga, incluso aunque haya seis diapositivas de nivel superior (que es mi problema; la segunda diapositiva solo contiene una imagen interna a la izquierda, que detiene el guión), pero puede ver cuáles son las transiciones previstas y verifique el código completo.

El problema es que no todas las presentaciones de diapositivas secundarias tienen más de una imagen, y jQuery Cycle termina si hay una o menos imágenes en una presentación de diapositivas. Esta terminación también finaliza la presentación de diapositivas de nivel superior, ya que se detiene y se inicia en función de cuándo finaliza la presentación de diapositivas secundaria. Como la presentación de diapositivas secundaria termina debido a una sola "diapositiva", nunca se llama a la siguiente diapositiva de nivel superior externa. No estoy seguro de cómo adaptar el código para evitar esto.

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

Una muestra del 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>

La presentación de diapositivas termina en el segundo # home-slides> div porque solo hay una imagen. Intenté eliminar el anidamiento y la clase "deslizante" de las diapositivas sin presentación de diapositivas interna, pero eso no ayuda.

De nuevo, la versión completa de trabajo con todo el código relevante se puede encontrar aquí:http: //dl.dropbox.com/u/2890872/js-test/index.htm

----------- EDITADO 4/10 - Actualizaciones menores y posiblemente una ventaja ----------

He editado el código aquí y en el enlace de ejemplo solo para agregar algunos detalles que eliminan los primeros pensamientos para la solución de problemas. Ahora, solo las diapositivas con presentaciones de diapositivas secundarias usan la clase "slide-up".
- He intentado especificar la clase '.slide-up' en la función para la devolución de llamada "final" ('$(this).children('.slide-up').cycle ... '), lo que evita que el ciclo finalice para muy pocas diapositivas, ¡pero eso solo hace que finalice para elementos no coincidentes!

Lo más cerca que he llegado es al agregar una verificación condicional a la función en la devolución de llamada final: (estoy usando la longitud para verificar la existencia de un div deslizante. Si hay una mejor manera, hágamelo saber)

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

Esto elimina todos los errores y terminaciones directamente de jQuery Cycle, pero la presentación principal todavía se detiene en la diapositiva sin una presentación secundaria. Creo que necesito poner algo en la declaración "else" relacionada con la activación de "slideshow.cycle ('next');", pero no he descubierto la sintaxis adecuada para que eso funcione.

----------- EDITAR # 2 4/10 - ----------

ejemplo de trabajo más reciente:http: //dl.dropbox.com/u/2890872/js-test/index2.htm

over la función anterior a su propia función con nombre para mantener las cosas más limpias.

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

Esta (instrucción else) permite que la presentación de diapositivas progrese, pero no conserva las opciones originales de 'presentación de diapositivas', y solo comienza a reproducir las diapositivas de nivel superior con opciones predeterminadas listas para usar (se desvanece de una diapositiva a otra). el siguiente, en lugar de deslizarse, deja de reproducir diapositivas secundarias).

No entiendo: 1) Cómo preservar las opciones. (Pensé que por eso se creó la var "presentación de diapositivas" en primer lugar)

2) ¿Por qué es necesaria una declaración else? No entiendo por qué las diapositivas externas se detienen en absoluto cuando no se ejecuta la declaración condicional '.slide-up'. Creo que la presentación de diapositivas externa continuará de la manera normal. .