Tengo una página en la que puse una galería de fotografías, quiero que cada fotografía abra una pantalla modal que tiene dos carruseles de fotos.
Todo funciona aparentemente bien, pero me di cuenta que, al momento de abrir la página, el menú no esta activo, por decirlo de alguna manera. En palabras sencillas, paso el cursor sobre el menú y no cambia el cursor, no cambia el color del texto y al dar click no hace nada, pero una vez que abro y cierro la modal, entonces si todo vuelve a funcionar... al pasar el cursor sobre el menú cambia el cursor, cambian los colores y me permite navegar a las páginas que tienen los links del menú...
No se que me este faltando. Ya coloque la modal en diferentes partes del código y en cualquier lado que lo ponga hace lo mismo, en cambio si lo quito todo funciona bien...
Espero me puedan ayudar.. aquí les dejo el código de la modal:
<!-- Modal para Salón Vitrales -->
<div class="modal fade" id="modal-vitrales">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Modal body -->
<div id="Car-Up-vitrales" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#Car-Up-vitrales" data-slide-to="0" class="active"></li>
<li data-target="#Car-Up-vitrales" data-slide-to="1"></li>
<li data-target="#Car-Up-vitrales" data-slide-to="2"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/body/Vit-up_01.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
<div class="item">
<img src="img/body/Vit-up_02.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
<div class="item">
<img src="img/body/Vit-up_03.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#Car-Up-vitrales" data-slide="prev">
<span class="fas fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#Car-Up-vitrales" data-slide="next">
<span class="fas fa-angle-right"></span>
</a>
</div>
<div id="Car-down-vitrales" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#Car-down-vitrales" data-slide-to="0" class="active"></li>
<li data-target="#Car-down-vitrales" data-slide-to="1"></li>
<li data-target="#Car-down-vitrales" data-slide-to="2"></li>
<li data-target="#Car-down-vitrales" data-slide-to="3"></li>
<li data-target="#Car-down-vitrales" data-slide-to="4"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/body/Vit-down_01.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
<div class="item">
<img src="img/body/Vit-down_02.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
<div class="item">
<img src="img/body/Vit-down_03.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
<div class="item">
<img src="img/body/Vit-down_04.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
<div class="item">
<img src="img/body/Vit-down_05.jpg" alt="Salón Vitrales" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#Car-down-vitrales" data-slide="prev">
<span class="fas fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#Car-down-vitrales" data-slide="next">
<span class="fas fa-angle-right"></span>
</a>
</div>
</div>
</div>
</div>
Y el código completo que funciona sin la modal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hotel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Hotel" />
<meta name="author" content="" />
<!-- css -->
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="font/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="font/fontawesome-free/css/ionicons.min.css">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
<link rel="shortcut icon" href="ico/flaico_pag.png" />
</head>
<body>
<div id="wrapper">
<header>
<div class="navbar navbar-fixed-top">
<section class="InfoTop">
<div class="row">
<div class="hidden-top-inner">
<div class="span8">
<ul>
<li><a href="#" data-placement="bottom" title="Twitter"><i class="icon-twitter icon-plain"></i></a></li>
<li><a href="#" data-placement="bottom" title="Facebook"><i class="icon-facebook icon-plain"></i></a></li>
<li><a href="#" data-placement="bottom" title="TripAdvisor"><i class="fab fa-tripadvisor icon-plain"></i></a></li>
<li><a href="#" data-placement="bottom" title="YouTube"><i class="fab fa-youtube icon-plain"></i></a></li>
<li><i class="icon-phone"></i> +01</li>
<li><i class="icon-whats"></i> +52</li>
</ul>
</div>
<div class="span4 floatright">
<a class="btn btn-large btn-theme btn-rounded e_shake" href="#">Reserva ahora!</a>
</div>
</div>
</div>
</section>
<section class="MenuPpal">
<div class="container">
<div class="row">
<div class="span4">
<a class="navbar-brand" href="index.html"><img src="img/logofla.png" alt=""></a>
</div>
<div class="span8">
<div class="navigation">
<nav>
<ul class="nav topnav">
<li class="dropdown">
<a href="index.html">Inicio </a>
</li>
<li class="dropdown">
<a href="index.html#servicios">Servicios e Instalaciones </a>
</li>
<li class="dropdown">
<a href="index.html#galeria">Galeria </a>
</li>
<li class="dropdown">
<a href="habitaciones.html">Habitaciones <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="habitaciones.html#tradicional">Área Tradicional</a></li>
<li><a href="habitaciones.html#ejecutiva">Área Ejecutiva</a></li>
</ul>
</li>
<li class="dropdown active">
<a href="grupos.html">Grupos y Eventos </i></a>
</li>
<li>
<a href="ubicacion.html">Ubicación </a>
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</div>
</section>
</div>
</header>
<!-- end header -->
<section id="eventos">
<div class="container" style="margin-top:150px">
<div class="row">
<div class="span12">
<h4 class="heading">Grupos y Eventos </h4>
</div>
</div>
</div>
</section>
<section id="general">
<div class="container">
<br>
<div class="row">
<div class="span2">
</div>
<div class="span8">
<p class="aligncenter">
Si usted desea realizar algún evento social o de negocios, ya sea una junta, seminario, curso, XV’s, baby shower, comida, boda, etcétera, ponemos a su disposición 5 salones con capacidad máxima de 120 personas y una sala de juntas.
</p>
<p class="aligncenter">
Nuestros salones se adaptan a sus necesidades y nuestro equipo de trabajo pone atención a todos los detalles para que sus eventos tengan éxito y sus invitados se vayan satisfechos.
</p>
</div>
<div class="span2">
</div>
</div>
</div>
<br>
</section>
<section id="salones">
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<ul id="thumbs" class="portfolio">
<!-- Item Project -->
<li class="item-thumbs span4 design" data-id="id-0" data-type="web">
<a data-toggle="modal" href="#modal-vitrales">
<div class="marcoFoto">
<img src="img/body/Vitrales_00.jpg" alt="Salón Vitrales">
</div>
</a>
</li>
<!-- End Item Project -->
<!-- Item Project -->
<li class="item-thumbs span4 design" data-id="id-1" data-type="web">
<a data-toggle="modal" href="#modal-arcos">
<div class="marcoFoto">
<img src="img/body/Arcos_00.jpg" alt="Salón Arcos">
</div>
</a>
</li>
<!-- End Item Project -->
<!-- Item Project -->
<li class="item-thumbs span4 design" data-id="id-2" data-type="web">
<a data-toggle="modal" href="#modal-jardin">
<div class="marcoFoto">
<img src="img/body/Jardin_00.jpg" alt="Salón Jardín">
</div>
</a>
</li>
<!-- End Item Project -->
<!-- Item Project -->
<li class="item-thumbs span4 design" data-id="id-3" data-type="web">
<a data-toggle="modal" href="#modal-cristal">
<div class="marcoFoto">
<img src="img/body/Cristal_00.jpg" alt="Salón Cristal">
</div>
</a>
</li>
<!-- End Item Project -->
<!-- Item Project -->
<li class="item-thumbs span4 design" data-id="id-4" data-type="web">
<a data-toggle="modal" href="#modal-bugambilia">
<div class="marcoFoto">
<img src="img/body/Bugambilia_00.jpg" alt="Salón Bugambilia">
</div>
</a>
</li>
<!-- End Item Project -->
<!-- Item Project -->
<li class="item-thumbs span4 design" data-id="id-5" data-type="web">
<a data-toggle="modal" href="#modal-sjuntas">
<div class="marcoFoto">
<img src="img/body/SJuntas_00.jpg" alt="Sala de Juntas">
</div>
</a>
</li>
<!-- End Item Project -->
</ul>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="span3">
<div class="widget">
<h5 class="widgetheading">Contacto</h5>
<address>
<strong>Direccion </strong>
<br>
<br>
</address>
<p>
Tel: (442) 101-9696 <br>
reservacione[email protected]
</p>
</div>
</div>
<div class="span3">
<div class="widget">
<h5 class="widgetheading">Certificaciones</h5>
<img src="img/footer/certificaciones-footer.jpg">
</div>
</div>
<div class="span3">
<div class="widget">
<h5 class="widgetheading">Ofertas Especiales</h5>
<a class="nav-link active" href="#">Ver mas ... </a>
</div>
</div>
<div class="span3">
<div class="widget">
<h5 class="widgetheading">Bolsa de Trabajo</h5>
<a href="#">[email protected]</a>
</div>
</div>
</div>
</div>
</footer>
</div>
<a href="#" class="scrollup"><i class="icon-chevron-up icon-square icon-32 active"></i></a>
<!-- javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jcarousel/jquery.jcarousel.min.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/portfolio/jquery.quicksand.js"></script>
<script src="js/portfolio/setting.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.ba-cond.min.js"></script>
<script src="js/jquery.slitslider.js"></script>
<script src="js/animate.js"></script>
</body>
</html>