Manejo de imágenes con jQuery: Despliegue secuencial

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

También te podría gustar...

Sobre este artículo

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

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

11 Respuestas

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

  2. sergio

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

  3. Developer()

    he incorporado esta función tan maravillosa y ha funcionado perfectamente.

    La modifiqué, para que su efecto fuera algo parecido a twitter y algo raro sucedió :/, al llegar a la ultima imagen no logro hacer que cargue del principio nuevamente, si alguien pudiese echarme una manito se lo agradecería.

    Dejo el código que he 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;

    })();
    });

  4. daniel

    ya lo solucioné xD..

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

  6. D2S Web

    Gracias por este aporte tan interesante y útil, me gustaría poder hacer el mismo efecto 4 veces o más repetidas en la misma pagina, para mostrar logotipos diseñados por años. Lo he intentado pero aparecen todos los logotipos y mi intención es que funcionen independientes pudiendo activar una sección u otra al gusto del usuario. ¿Podrían ayudarme?.

  7. Daniel Navarro

    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

  8. lucas

    Hola, me encantó tu aporte, pero yo no sé mucho de javascript, así que te pregunto a ver si me puedes ayudar, ¿se puede poner para que con un mismo botón se pueda mostrar y ocultar?

  9. Carlos

    Muchas gracias Daniel.

    Funciona perfectamente,

    Gracias por la ayuda

    PD: Vas para favoritos xD

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

  11. Carlos

    Buenas Daniel.

    Primero darte las gracias por el aporte que has hecho y me ha servido de gran ayuda. Tengo una duda y a ver si me podrías echar una mano.

    Necesito que el efecto que hace cuando pinchas en el botón de mostrar, lo haga al cargar la web automáticamente. Tengo dos imágenes y necesito que aparezca una y luego la otra.

    Espero me puedas echar una mano.

Deja un comentario

El email no se publica. Todos los campos obligatorios, salvo Web.

Usamos cookies propias y de terceros para mejorar nuestros servicios, realizar el análisis de la navegación de los usuarios y mostrar publicidad según tus preferencias y hábitos de navegación. Si continúas navegando, las aceptas. Puede cambiar la configuración u obtener más información aquí

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar