Question

I am having issues with some conflicting javascripts. I have one script that creates a dropdown menu, and a set of scripts that make fancybox work. However, when both sets of scripts are in my header code, they conflict and only one function will work. Whichever script I place first in the code is the one that doesn’t work.

I know very very little about javascript/jquery, I am simply working with some scripts that someone gave me to put in with my HTML (which I am very knowledgeable with). If anyone could help with an answer (and dumb it down a bit for me 🙂 ) it would be really helpful.

I have tried to use the console to check out conflicts in my scripts, but I’m a little lost and not sure what I’m supposed to be looking at in there. If someone would like to tell me how to properly check out a problem in the console, that would work too, although I can’t guarantee that alone will help me.

Here is the code in the Head of my homepage html file with fancybox first (this way, fancybox does not work, but the dropdown menu does):

<!--dropdown menu script starts here--> 
<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>
<!--dropdown menu script ends here-->   

<!--fancybox script starts here-->      
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="/common/js/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {

    // fancybox for vimeo
    $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS : 'fancybox-nav-video'
    });

    $('.fancybox').fancybox(
    {
    padding : 0,
    openEffect  : 'elastic'
    }
    );
    $(".fancybox").fancybox(
    {
    wrapCSS    : 'fancybox-custom',
    closeClick : true,
    helpers : {
    overlay : {
    css : {
    'background-color' : '#000'
    }
    },
    thumbs  : {
    width   : 50,
    height  : 50
    }
    }
    }
    );
    }
    );

    $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
</script>

Answer 1

You’re loading the jQuery library twice, and slightly different version number too (1.7 vs. 1.7.2).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"></script>  

As mentioned in the comments, you’re also loading it elsewhere too. Once is enough!

Edit

You’re also loading jQuery here too (twice):

<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>