elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema carousel (slider) jQuery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema carousel (slider) jQuery  (Leído 2,026 veces)
Spider-Net


Desconectado Desconectado

Mensajes: 1.165


Un gran poder conlleva una gran responsabilidad


Ver Perfil WWW
Problema carousel (slider) jQuery
« en: 29 Julio 2011, 18:13 pm »

Hola a tod@s,

Estoy haciendo un nuevo proyecto y tengo un problema que me ha parecido algo curioso  y no sé por qué será. Así que vengo a preguntaros a ver si a alguien más le ha pasado y sabe como solucionarlo XD.

La web es un portafolio, tiene poco contenido y es bastante sencilla así que está hecha en Ajax. Tengo 4 divs, uno para cada apartado de la web y uso la función de jquery FadeIn para mostrar el div de la categoría que quiere ver el usuario y la función hide() de jquery para ocultar el resto.

En 2 de los divs tengo puesto un carousel (slider) para que las imágenes vayan pasando y quede bonito. Todo funciona perfecto, pero el carousel tiene un tiempo en milisegundos de 5000. Este es el tiempo que tarda en cambiar entre una imagen y otra.
Aquí viene lo curioso. El slider funciona bien, pero cuando cambio a otras categorías durante un rato y luego vuelvo al carousel, me encuentro que ya no respeta los 5000 milisegundos en los cambios entre imagen e imagen, sino que empieza a cambiar sin parar. Al cabo de un rato se vuelve a estabilizar.

Me da la sensación que mientras está oculto va como acumulando el tiempo y las imágenes que deberían de ir pasando, pero al estar oculto ese div no lo hace, y al volver al div del carrousel como que ejecuta todas las vueltas que tiene acumuladas XDD. He llegado a esa conclusión porque mientras más tiempo permanezco en otras categorías, más vueltas da luego cuando vuelvo al carousel. Así que me gustaría saber si a alguno de vosotros os ha pasado algo similar y como arreglarlo.
Lo he probado en varios navegadores y en todos pasa igual, así que no es problema del navegador.

Dejo algo de código sobre el carousel por si alguien encuentra algún fallo:

Este es el código del menú que oculta y muestra la categoría correspondiente, y la inicialización del carousel con el delay de 5000 milisegundos:

Código
  1. $(document).ready(function () {
  2. // Menu
  3. $('#navMenu li').append('<div class="hover"><\/div>');
  4. $('#navMenu li').hover(
  5. function() {
  6. $(this).children('div').fadeIn(800);
  7. },
  8. function() {
  9. $(this).children('div').fadeOut(800);
  10. });
  11. $('#home').click(
  12. function() {
  13. $('#div-aboutme').hide();
  14. $('#div-portfolio').hide();
  15. $('#div-contact').hide();
  16. $('#contact-form').validationEngine('hide');
  17. $('#div-home').fadeIn(2000);
  18. });
  19. $('#aboutme').click(
  20. function() {
  21. $('#div-home').hide();
  22. $('#div-portfolio').hide();
  23. $('#div-contact').hide();
  24. $('#contact-form').validationEngine('hide');
  25. $('#div-aboutme').fadeIn(2000);
  26. $('#ext-about').fadeIn(2000);
  27. });
  28. $('#portfolio').click(
  29. function() {
  30. $('#div-home').hide();
  31. $('#div-aboutme').hide();
  32. $('#div-contact').hide();
  33. $('#contact-form').validationEngine('hide');
  34. $('#div-portfolio').fadeIn(2000);
  35. });
  36. $('#contact').click(
  37. function() {
  38. $('#div-home').hide();
  39. $('#div-aboutme').hide();
  40. $('#div-portfolio').hide();
  41. $('#div-contact').fadeIn(2000);
  42. });
  43.  
  44.  
  45.       // Slider o carousel
  46.      $('#slider1').s3Slider({
  47. timeOut: 5000
  48.      });
  49. });
  50.  

El código del slider que estoy usando:
Código
  1. /* ------------------------------------------------------------------------
  2. s3Slider
  3.  
  4. Developped By: Boban Karišik -> http://www.serie3.info/
  5.         CSS Help: Mészáros Róbert -> http://www.perspectived.com/
  6. Version: 1.0
  7.  
  8. Copyright: Feel free to redistribute the script/modify it, as
  9.   long as you leave my infos at the top.
  10. ------------------------------------------------------------------------- */
  11.  
  12.  
  13. (function($){  
  14.  
  15.    $.fn.s3Slider = function(vars) {      
  16.  
  17.        var element     = this;
  18.        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
  19.        var current     = null;
  20.        var timeOutFn   = null;
  21.        var faderStat   = true;
  22.        var mOver       = false;
  23.        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
  24.        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
  25.  
  26.        items.each(function(i) {
  27.  
  28.            $(items[i]).mouseover(function() {
  29.               mOver = true;
  30.            });
  31.  
  32.            $(items[i]).mouseout(function() {
  33.                mOver   = false;
  34.                fadeElement(true);
  35.            });
  36.  
  37.        });
  38.  
  39.        var fadeElement = function(isMouseOut) {
  40.            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
  41.            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
  42.            if(items.length > 0) {
  43.                timeOutFn = setTimeout(makeSlider, thisTimeOut);
  44.            } else {
  45.                console.log("Poof..");
  46.            }
  47.        }
  48.  
  49.        var makeSlider = function() {
  50.            current = (current != null) ? current : items[(items.length-1)];
  51.            var currNo      = jQuery.inArray(current, items) + 1
  52.            currNo = (currNo == items.length) ? 0 : (currNo - 1);
  53.            var newMargin   = $(element).width() * currNo;
  54.            if(faderStat == true) {
  55.                if(!mOver) {
  56.                    $(items[currNo]).fadeIn((timeOut/6), function() {
  57.                        if($(itemsSpan[currNo]).css('bottom') == 0) {
  58.                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
  59.                                faderStat = false;
  60.                                current = items[currNo];
  61.                                if(!mOver) {
  62.                                    fadeElement(false);
  63.                                }
  64.                            });
  65.                        } else {
  66.                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
  67.                                faderStat = false;
  68.                                current = items[currNo];
  69.                                if(!mOver) {
  70.                                    fadeElement(false);
  71.                                }
  72.                            });
  73.                        }
  74.                    });
  75.                }
  76.            } else {
  77.                if(!mOver) {
  78.                    if($(itemsSpan[currNo]).css('bottom') == 0) {
  79.                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
  80.                            $(items[currNo]).fadeOut((timeOut/6), function() {
  81.                                faderStat = true;
  82.                                current = items[(currNo+1)];
  83.                                if(!mOver) {
  84.                                    fadeElement(false);
  85.                                }
  86.                            });
  87.                        });
  88.                    } else {
  89.                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
  90.                        $(items[currNo]).fadeOut((timeOut/6), function() {
  91.                                faderStat = true;
  92.                                current = items[(currNo+1)];
  93.                                if(!mOver) {
  94.                                    fadeElement(false);
  95.                                }
  96.                            });
  97.                        });
  98.                    }
  99.                }
  100.            }
  101.        }
  102.  
  103.        makeSlider();
  104.  
  105.    };  
  106.  
  107. })(jQuery);  
  108.  

El cógido HTML correspondiente es:

Código
  1. <div class="content">
  2. <div id="logo">
  3. <a href="http://www.mainpage.com"><img src="images/logo.png" border="0" alt="logo" /></a>
  4. </div>
  5. <div class="botonera">
  6. <ul id="navMenu">
  7. <li id="home"><img src="images/iconhome.png" border="0" alt="home" /><a href="javascript: void(0);">Home</a></li>
  8. <li id="aboutme"><img src="images/iconabout.png" border="0" alt="aboutme" /><a href="javascript: void(0);">About me</a></li>
  9. <li id="portfolio"><img src="images/iconproyects.png" border="0" alt="portfolio" /><a href="javascript: void(0);">Portfolio</a></li>
  10. <li id="contact"><img src="images/iconcontact.png" border="0" alt="contact" /><a href="javascript: void(0);">Contact me</a></li>
  11. </ul>
  12. </div>
  13.  
  14. <div class="home">
  15. <div id="div-home">
  16. <div id="slider1">
  17. <ul id="slider1Content">
  18. <li class="slider1Image">
  19. <a href="http://www.url1.com" target="_blank"><img src="images/wide/1.jpg" alt="url1" /></a>
  20. <span class="bottom"><strong>Pagina1</strong><br /></span></li>
  21. <li class="slider1Image">
  22. <a href="http://www.url2.com" target="_blank"><img src="images/wide/2.jpg" alt="url2" /></a>
  23. <span class="bottom"><strong>Pagina2</strong><br /></span></li>
  24. <li class="slider1Image">
  25. <a href="http://www.url2.com" target="_blank"><img src="images/wide/3.jpg" alt="url3" /></a>
  26. <span class="bottom"><strong>Pagina3</strong><br /></span></li>
  27. <div class="clear slider1Image"></div>
  28. </ul>
  29. </div>
  30. </div>
  31. <div id="div-aboutme">
  32. About me        
  33. </div>  
  34. <div id="div-portfolio">
  35. Portfolio
  36.                </div>
  37. <div id="div-contact">
  38. Contact me
  39. </div>      
  40. </div>      
  41. </div>
  42.  

Sé que podría cargar el contenido de los divs con jquery load() o html() pero no es necesario, porque el contenido es bastante simple. Es sólo texto o alguna que otra imagen por ese motivo simplemente oculto o muestro los divs. El único problema es lo del carousel, que no sé por qué motivo hace eso XD.
No pongo el código del CSS porque creo que es irrelevante, no creo que tenga nada que ver con esto ya que el problema es en el timeOut del slider. Vamos que es cuestión de javascript seguro.

Un problema raro, que veo complicado de solucionar, a ver si por casualidad alguno de vosotros ha tenido alguna vez un problema similar y encontró alguna solución.

Saludos.


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema con php cargado en un div con jquery
PHP
NataliaV 3 1,838 Último mensaje 25 Agosto 2012, 18:53 pm
por NataliaV
Problema con jQuery (tooltip)
Desarrollo Web
K4sS- 1 1,420 Último mensaje 26 Agosto 2012, 18:30 pm
por #!drvy
Slider Automatico Jquery (AYUDA)
Desarrollo Web
nevermind2403 0 964 Último mensaje 13 Noviembre 2013, 05:09 am
por nevermind2403
Incluir carousel modal, como lo hago?
Desarrollo Web
Pitufete 3 1,967 Último mensaje 11 Octubre 2014, 10:00 am
por Pitufete
[Resuelto] jquery create checkbox con slider « 1 2 »
Desarrollo Web
gAb1 14 3,502 Último mensaje 22 Mayo 2015, 18:09 pm
por gAb1
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines