Hace unos días postee una duda que tenía a la hora de crear un menú con pestañas con jquery y que, gracias a Nekko, pude solucionar.
Insertando este codigo JS consigo crear el típico menú que muestra contenido según pulsamos una u otra pestaña...
Código:
El menú tengo tres pestañas; 'información' (que se muestra por defecto), 'calendario' y 'fotos'. La idea es que, al pinchar en 'fotos', se muestren una serie de imagenes en miniatura para que, al pinchar sobre éstas, se abra el típico lightbox que muestra la foto en su tamaño original. Para hacer esto, utilizo el plugin 'jQuery Lightbox For Native Galleries'. Hasta aquí todo bien.
<script type="text/javascript">
(function($) {
$(document).ready(function(){ // Script del menú con pestañas
$('#contentSchool div').css('position', 'relative').not(':first').hide();
$('#contentSchool ul li:first a').addClass('aqui');
$('#contentSchool a').click(function(){
$('#contentSchool a').removeClass('aqui');
$(this).addClass('aqui');
$('#contentSchool div').fadeOut(350).filter(this.hash).fadeIn(350);
return false;
});
});
})(jQuery);
</script>
Bien, el problema viene cuando al pinchar sobre la miniatura, el div que genera el plugin, y que contiene tanto el 'overlay' como el 'lightbox' no se muestra debido a que el código JS está añadiendo el estilo display: none; , que utiliza para el menú con pestañas, y que sirve para no mostrar todo el contenido de golpe y esconderlo hasta que seleccionamos la pestaña correspondiente. Éste estilo afecta a todos aquellos divs que se encuentren dentro de #contentSchool (como veis en el código de arriba).
Si saco las fotos del div #contentSchool, el plugin funciona sin problemas, pero entonces, me muestra las fotos en todas las secciones del menú, y no sólo en la sección 'fotos'.
También he intentado, mediante css, forzar al div que contiene este 'overlay' y el 'lightbox' mediante display: block !important;, pero entonces, cuando recargo la página, me muestra directamente el 'overlay' (el típico fondo con transparencia) sin poder navegar por la página, en lugar de activarlo cuando pinchamos en 'fotos' y luego en la miniatura.
No se muy bien como modificar el código para que me muestre éste div contenedor en el momento adecuado y a la vez siga funcionando el JS para el menú con pestañas.
Se les ocurre alguna idea?
Muchas gracias por su tiempo, como siempre!
Espero haberme explicado bien, pero si tienen alguna duda, por favor díganla que estaré gustoso de responderla.
Un saludo y gracias de nuevo
