2

I been having some troubles involving jQuery and my navbar button. Let me explain a little more detailed my problem. So, I made a site using Bootstrap which includes jquery 1.11.2, everything went fine until I decided to use fancybox to create a lightbox with some google maps. (My Google API uses jquery 1.7.1), this is when things started to fail.

I noticed that my Navbar responsive button didn't work whiteout jquery 1.11.2 (which I disabled before) so I put it again but my maps lightbox didn't work.

How can I use jquery 1.7.1 in my navbar? I can't find any codeline with it. Here's my code for my navbar

<!-- Home -->
<section class="header" id="header">
    
    <nav class="navbar navbar-default" id="navigation-bar">
        <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://www.ecomotor.cl">Ecomotor</a>
            </div> <!-- /.navbar-header -->


        <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#header">Inicio</a></li>
                    
                    <li><a href="#service">Despacho</a></li>
                    <li><a href="#portfolio">Galeria</a></li>
                    <li><a href="#about">Acerca de</a></li>
                    <li><a href="#contact">Contacto</a></li>
                </ul> <!-- /.nav -->
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->

and below is the js used (which has the google API)

    <!-- Grab Google CDN's jQuery, fall back to local if offline -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>      
<!-- FancyBox -->
    <script src="assets/js/fancybox/jquery.fancybox.js"></script>
    <script src="assets/js/fancybox/jquery.fancybox-buttons.js"></script>
    <script src="assets/js/fancybox/jquery.fancybox-thumbs.js"></script>
    <script src="assets/js/fancybox/jquery.easing-1.3.pack.js"></script>
    <script src="assets/js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".various").fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'elastic',
                closeEffect : 'none'
            });
        });
    </script>

<script src="assets/js/jquery-1.11.2.min.js"></script>(if I delete this line, my maps work perfectly but not my navbar button, the opposite happens if I keep it) 
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/contact.js"></script>
<script src="assets/js/script.js"></script>
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Ignacio Riffo
  • 23
  • 2

1 Answers1

0

Use a single jQuery version

  1. Remove this line:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  1. Remove this line:

<script src="assets/js/jquery-1.11.2.min.js"></script>

  1. Put this line before all other <script> tags:

<script src="assets/js/jquery-1.11.2.min.js"></script>

This way, you will have only one jQuery version on your page, and this version will be used by both the lightbox and the Navbar responsive button.

Use two jQuery versions

If you really do need to use two versions of jQuery on your page, that is possible via jQuery.noConflict().

See an example here:

Can I use multiple versions of jQuery on the same page?

Community
  • 1
  • 1
Dmytro Shevchenko
  • 33,431
  • 6
  • 51
  • 67