Manejo de imágenes con jQuery: Despliegue secuencial

Sobre este artículo

Licencia: Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

URL: Diseño Web :: LaWebera.es

Lleva trabajando como desarrollador web desde hace más de 10 años. Es un apasionado del código, habiendo tocado todos los palos, especialmente PHP, MySQL, JavaScript, incluyendo frameworks y librerías como jQuery, Symfony, CakePHP...

También te podría gustar...

11 Respuestas

  1. Carlos

    Buenas Daniel.

    Primero darte las gracias por el aporte que has hecho y me ha servido de gran ayuda. Tengo una duda y haber si me podrias echar una mano.

    Necesito que el efecto que hace cuando pinchas en el boton de mostrar, lo haga al cargar la web automaticamente. Tengo dos imagenes y necesito que aparezca una y luego la otra.

    Espero me puedas echar una mano.

  2. dnavarro

    Hola Carlos, un gusto que te haya resultado de ayuda el artículo, para realizar lo que pides basta con hacer unas pequeñas modificaciones al código original, en vez de mandar llamar a la función “mostrarimg” al dar clic, la llamaremos al momento en que se carga nuestro documento, para ello basta con remover las líneas que se encuentran entre la sentencia “$(‘#mostrar’).click(function() { }” y colocarlas de la siguiente manera:

    $(document).ready(function() {
    var lista = $(‘li’).hide();
    var i = 0;
    (function mostrarimg() {
    lista.eq(i++).fadeIn(400, mostrarimg);
    })();

    $(‘#ocultar’).click(function() {
    var i = $(‘li’).size();
    (function ocultarimg() {
    lista.eq(–i).fadeOut(200, ocultarimg);
    })();
    });
    });

    Con ello la función y la iniciación de la variable “i” ahora se harán cuando se ejecute la función “ready” la cual se activa al momento en que nuestro documento se carga.

    Saludos

  3. Carlos

    Muchas Daniel.

    Funciona perfectamente,

    Gracias por la ayuda

    PD: Vas para favoritos xD

  4. lucas

    hola me encanto tu aporte pero yo nose mucho de javascript asique te pregunto aver si me podes ayudar, se puede poner para que con un mismo boton se pueda mostrar y ocultar

  5. dnavarro

    Hola Lucas muchas gracias por el comentario, mira puedes intentar aplicar esta funcionalidad al link

    $(‘#mostrar’).click(function(e) {
    if($(‘#mostrar’).html() == “Mostrar”){
    $(‘#mostrar’).html(“Ocultar”);
    var i = 0;
    (function mostrarimg() {
    lista.eq(i++).fadeIn(400, mostrarimg);
    })();
    }else{
    var i = $(‘li’).size();
    (function ocultarimg() {
    lista.eq(–i).fadeOut(200, ocultarimg);
    })();
    }
    });

    Con este código utilizamos el contenido del link para saber que tipo de funcionalidad utilizar, ya sea mostrar u ocultar las imágenes, pero también se puede optar por otras opciones como cambiar el ID del link o botón que estás usando, así cuando el link diga Mostrar el id será “#mostrar” y cuando le des click cambie a “#ocultar” y de esa manera tener las dos funcionalidades por separado.

    Espero este código te ayude.

    Saludos

  6. D2S Web

    Gracias por este aporte tan interesante y util, me gustaria poder hacer el mismo efecto 4 veces o mas repetidas en la misma pagina, para mostrar logotipos diseñados por años. Lo he intentado pero aparecen todos los logotipos y mi intencion es que funcionen independientes pudiendo activar una seccion u otra al gusto del usuario. Podrian ayudarme.

  7. daniel

    Hola!!! me ha servido bastante el código, pero tengo un problema, lo que pasa es que tengo un menu pero se compone de varias imagenes y lo que quiero es que cada una muestre una imagen separada…

    Y con el código al dar clic sobre una imagen se despliegan todas..

    Espero me puedas ayudar..

  8. daniel

    ya lo solucioné xD..

  9. Developer()

    he incorporado esta función tan maravillosa y a funcionado perfectamente,la modifique, para que su efecto fuera algo parecido a twitter y algo raro sucedio :/, al llegar a la ultima imagen no logro hacer que carga del principio nuevamente, si alguien pudiese hecharme una manito se lo agradeceria.
    Dejo el codigo que modificado del original.

    $(document).ready(function() {
    var lista = $(‘li’).hide();
    $(‘#mostrar’).ready(function() {
    var i = 0;
    (function mostrarimg() {
    lista.eq(i++).fadeIn(1400, mostrarimg);
    })();

    });
    var i = $(‘li’).size();
    (function ocultarimg() {
    lista.eq(–i).fadeOut(1400, ocultarimg);
    i=0;

    })();
    });

  10. sergio

    Muchísimas gracias por el aporte. Me ha sido de gran utilidad. Un saludo

  11. Toni

    Puede ser que con IE8 solo me muestre el primer li? En Firefox, Chrome y Safari en PC y Mac funciona a la perfección.

Deja un comentario

El email no se publica. Todos los campos obligatorios.