Bueno amigos, tengo un problema el cual me a dado ya unos buenos dolores de cabeza y no tengo otra opción que recurrir a su ayuda.
Estoy haciendo una mini galería de imágenes en jquery, esta consiste en una serie de menús que se despliegan como acordeón y dentro ay una pequeña galería.
En un principio a simple vista funciona, pueden ver la siguiente imagen
[URL="http://i52.tinypic.com/2nqcwhf.jpg"]http://i52.tinypic.com/2nqcwhf.jpg[/URL]
Aparentemente no se ve con problemas, pero al desplegar otro menu del acordeon, se puede notar lo siguiente
[URL="http://i54.tinypic.com/2db86iq.png"]http://i54.tinypic.com/2db86iq.png[/URL]
Después de jugar un rato con el code, decidí quitar la funcionalidad de acordeón, es decir, al cargar, todos los menús del acordeón estarían desplegados y al parecer si se cargaban bien las galerías.
[URL="http://i52.tinypic.com/2l8yh60.png"]http://i52.tinypic.com/2l8yh60.png[/URL]
Todo eso me llevo a la conclusión que al esconder los menús, también se interrumpía el ciclo de carga de la galería, llevando a ese bug.
El efecto que usa jquery para esconder los menús al comienzo es darle .hide(); a todos los elementos menos al primero.
Después de pensar un rato se me ocurrió que se podría esperar primero la carga de todos los elementos de la pagina, y luego esconder todos los menús menos el primero completando la funcionalidad deseada, pero no doy con la forma de hacerlo.
Este es que código que se usa para el acordeón de menús.
Código:
<script type="text/javascript">
$(document).ready(function(){
$(".acordion h3:first").addClass("active");
$(".acordion .solapa:not(:first)").hide();
$(".acordion h3").click(function(){
$(this).next(".solapa").slideToggle("slow")
.siblings(".solapa:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
Espero su ayuda amigos, de antemano muchas gracias.
Saludos