Problemas al recuperar una función de animación al hacer una galería de imágenes jQuery. Botones Siguiente/Anterior

Esta es mi primera publicación en Stack Overflow y es porque me he estado arrancando los pelos por este problema durante el último día.

Soy bastante nuevo en jQuery y tengo una comprensión básica de cómo funcionan las cosas, pero realmente estoy luchando para que una función se repita después de que se haya procesado. Es una simple función if/else que recorre una serie de cinco imágenes para ver si son visibles o no.

Si una imagen es visible (en otras palabras, la imagen actual en una galería), los botones siguiente y anterior controlarán qué imagen es la próxima en aparecer y, posteriormente, desaparecerá la imagen anterior.

Tengo los enlaces Siguiente/Anterior funcionando para la primera imagen, pero no puedo hacer que funcione una vez que la segunda imagen se ha desvanecido. Supongo que es porque necesito recuperar el script para verificar si las imágenes están son visibles. Mi problema es que no sé dónde colocar el código. He probado el código en varios lugares y he estado investigando los retrasos y las devoluciones de llamada de jQuery para ver si puedo intentar averiguar si los tiempos no funcionan, etc. ¡Pero simplemente no puedo resolverlo!

Si alguien puede ayudar a que esto funcione o incluso sugerir una forma más simple de crear esto que no conozco, ¡se lo agradecería mucho!

Las imágenes simplemente se enumeran dentro de un div:

<div class="images">
    <img class="image gallery-img" id="1" src="/images/01.jpg" />
    <img class="image gallery-img" id="2" src="/images/02.jpg" />
    <img class="image gallery-img" id="3" src="/images/03.jpg" />
    <img class="image gallery-img" id="4" src="/images/04.jpg" />
    <img class="image gallery-img" id="5" src="/images/05.jpg" />
</div>

<div class="gallery-controls">
    <a class="gallery-button" id="previous" href="#previous">Previous</a>
    <a class="gallery-button" id="next" href="#next">Next</a>
</div>

Y el jQuery es:

window.addEventListener( 'DOMContentLoaded', function(){

function galleryLoop(){

        if( $('div.images img:nth-child(1)').css({ 'display' : 'inline' }) ){

            //#NEXT CLICK
            $('a.gallery-button#next').bind('click', function(){
                $('div.images img:nth-child(1)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(2)').fadeIn();
                });//END FADE OUT
            }); //END #NEXT CLICK

            //#PREVIOUS CLICK
            $('a.gallery-button#previous').bind('click', function(){
                $('div.images img:nth-child(1)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(5)').fadeIn();
                });//END FADE OUT
            }); //END #PREVIOUS CLICK

        } //END IF

        else if( $('div.images img:nth-child(2)').css({ 'display' : 'inline' }) ){

            //#NEXT CLICK
            $('a.gallery-button#next').bind('click', function(){
                $('div.images img:nth-child(2)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(3)').fadeIn();
                });//END FADE OUT
            }); //END #NEXT CLICK

            //#PREVIOUS CLICK
            $('a.gallery-button#previous').bind('click', function(){
                $('div.images img:nth-child(2)').fadeOut( '100' , function(){ 
                    $('div.images img:first-child').fadeIn();
                });//END FADE OUT
            }); //END #PREVIOUS CLICK

        }; //END IF

    };

galleryLoop();  

});//FIN DEL GUIÓN

preguntado el 12 de junio de 12 a las 20:06

2 Respuestas

Ok, pasé mucho tiempo en esto, ¡así que espero que resuelva tu problema!

Aquí está el enlace al JSFiddle: http://jsfiddle.net/ekUvj/22/

Lo que quieres hacer es cambiar tu javascript a esto:

var imgNum = 1;
$("#1").fadeIn(300);


function prev () {
    newImageNum=(imgNum == 1)?5:imgNum-1;
    $("#".concat(imgNum)).fadeOut(300, function () {$("#".concat(newImageNum)).fadeIn(300);});
    imgNum = newImageNum;
}

function next () {
    newImageNum=(imgNum == 5)?1:imgNum+1;
    $("#".concat(imgNum)).fadeOut(300, function () {$("#".concat(newImageNum)).fadeIn(300);});
    imgNum = newImageNum;
}​

Y luego asegúrese de que sus botones llamen a las funciones:

<div class="gallery-controls">
    <button onclick="prev()">Previous</a>
    <button onclick="next()">Next</a>
</div>​

Luego, asegúrese de que sus imágenes estén ocultas al principio en el CSS:

.gallery-img {
    display: none;
}​

Respondido el 12 de junio de 12 a las 20:06

Saque la función del detector de eventos y podrá llamarla en cualquier momento.

Respondido el 12 de junio de 12 a las 20:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.