title: Fancybox Conflicting with Jquery
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>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):</p>
  
  <pre><code>&lt;!--dropdown menu script starts here--&gt; 
  &lt;script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/common/js/jquery.main.js"&gt;&lt;/script&gt;
  &lt;!--dropdown menu script ends here--&gt;   
  
  &lt;!--fancybox script starts here--&gt;      
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript" src="/common/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript" src="/common/js/fancybox/source/jquery.fancybox.js?v=2.0.6"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="/common/js/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" /&gt;
  &lt;link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(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();      
  &lt;/script&gt;
  </code></pre>