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:
$(document).ready(function () {
// Menu
$('#navMenu li').append('<div class="hover"><\/div>');
$('#navMenu li').hover(
function() {
$(this).children('div').fadeIn(800);
},
function() {
$(this).children('div').fadeOut(800);
});
$('#home').click(
function() {
$('#div-aboutme').hide();
$('#div-portfolio').hide();
$('#div-contact').hide();
$('#contact-form').validationEngine('hide');
$('#div-home').fadeIn(2000);
});
$('#aboutme').click(
function() {
$('#div-home').hide();
$('#div-portfolio').hide();
$('#div-contact').hide();
$('#contact-form').validationEngine('hide');
$('#div-aboutme').fadeIn(2000);
$('#ext-about').fadeIn(2000);
});
$('#portfolio').click(
function() {
$('#div-home').hide();
$('#div-aboutme').hide();
$('#div-contact').hide();
$('#contact-form').validationEngine('hide');
$('#div-portfolio').fadeIn(2000);
});
$('#contact').click(
function() {
$('#div-home').hide();
$('#div-aboutme').hide();
$('#div-portfolio').hide();
$('#div-contact').fadeIn(2000);
});
// Slider o carousel
$('#slider1').s3Slider({
timeOut: 5000
});
});
El código del slider que estoy usando:
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
El cógido HTML correspondiente es:
<a href="http://www.mainpage.com"><img src="images/logo.png" border="0" alt="logo" /></a> <li id="home"><img src="images/iconhome.png" border="0" alt="home" /><a href="javascript: void(0);">Home
</a></li> <li id="aboutme"><img src="images/iconabout.png" border="0" alt="aboutme" /><a href="javascript: void(0);">About me
</a></li> <li id="portfolio"><img src="images/iconproyects.png" border="0" alt="portfolio" /><a href="javascript: void(0);">Portfolio
</a></li> <li id="contact"><img src="images/iconcontact.png" border="0" alt="contact" /><a href="javascript: void(0);">Contact me
</a></li>
<li class="slider1Image"> <a href="http://www.url1.com" target="_blank"><img src="images/wide/1.jpg" alt="url1" /></a> <li class="slider1Image"> <a href="http://www.url2.com" target="_blank"><img src="images/wide/2.jpg" alt="url2" /></a> <li class="slider1Image"> <a href="http://www.url2.com" target="_blank"><img src="images/wide/3.jpg" alt="url3" /></a> <div class="clear slider1Image"></div> About me
Portfolio
Contact me
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.