Fancybox Conflicting with Jquery

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

First, as you can see from others, you have JQuery in there too much. Fancybox has issues with JQuery 1.8 though, so your going to want to stick with version 1.7. Get rid of the 1.8 script at the top in your dropdown area, and get rid of the cdn version from google for now, just use 1.7.2 that came with fancybox. Last, move the one remaining Jquery line to the top of the page, it has to load first. I don't know about the dropdown code, but it should be fine with JQuery 1.7. Not sure if this will fix you, but it is a cleaner starting point.

Answer 2

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>