title: Jquery Conflict which gives error
body: <p>Working on an project which has variety of functionality in it such as,</p>
  
  <ul>
  <li>Google translator </li>
  <li>Image Slider [galleriffic used]</li>
  <li>Popup window [Shadow box used]</li>
  <li>JavaScript horizontal menu bar*</li>
  </ul>
  
  <p><strong>Now we are getting jquery conflict in it and error message such as</strong> 
  <img src="https://i.stack.imgur.com/0zZoL.png" alt="Error Message"></p>
  
  <p><strong>I know such message are occurred when the code doesn't find the jquery file but the files is present .</strong></p>
  
  <p>Here are the list of files used in the project
  This is needed by the google translator</p>
  
  <pre><code>    1.&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
      2. &lt;script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"&gt;&lt;/script&gt;
      3. &lt;script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"&gt;&lt;/script&gt;
      4.  &lt;script type="text/javascript" src="/scripts/jquery.bt.js"&gt;&lt;/script&gt;
      5. &lt;script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"&gt;&lt;/script&gt;
      6. &lt;script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"&gt;&lt;/script&gt;
      7. &lt;script type="text/javascript" src="/scripts/common.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This one is for the slider</p>
  
  <pre><code>    1.  &lt;script type="text/javascript" src="/SliderBox/js/jquery-1.3.2.js"&gt;&lt;/script&gt;
      2.  &lt;script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"&gt;&lt;/script&gt;
      3.  &lt;script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is for the popup window</p>
  
  <pre><code>    1. &lt;script type="text/javascript" src="/SliderBox/js/prototype.js"&gt;&lt;/script&gt;
      2. &lt;script type="text/javascript" src="/SliderBox/js/effects.js"&gt;&lt;/script&gt;
      3. &lt;script type="text/javascript" src="/SliderBox/js/lightwindow.js"&gt;&lt;/script&gt;
      4. &lt;script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is needed by the horizontal menu </p>
  
  <pre><code>    1. &lt;script type="text/javascript" src="./jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      2. &lt;script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      3. &lt;script src="../scripts/settingsEN.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js
  but still not able to clear the conflict
  Here is the sequence used by me</strong></p>
  
  <pre><code>    1. &lt;script type="text/javascript" src="./jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      2.&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
      3. &lt;script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"&gt;&lt;/script&gt;
      4. &lt;script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"&gt;&lt;/script&gt;
      5.  &lt;script type="text/javascript" src="/scripts/jquery.bt.js"&gt;&lt;/script&gt;
      6. &lt;script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"&gt;&lt;/script&gt;
      7. &lt;script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"&gt;&lt;/script&gt;
      8. &lt;script type="text/javascript" src="/scripts/common.js"&gt;&lt;/script&gt;
      9. &lt;script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"&gt;&lt;/script&gt;
      10.  &lt;script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"&gt;&lt;/script&gt;
      11.&lt;script type="text/javascript" src="/SliderBox/js/prototype.js"&gt;&lt;/script&gt;
      12. &lt;script type="text/javascript" src="/SliderBox/js/effects.js"&gt;&lt;/script&gt;
      13. &lt;script type="text/javascript" src="/SliderBox/js/lightwindow.js"&gt;&lt;/script&gt;
      14. &lt;script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"&gt;&lt;/script&gt;
      15.&lt;script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      16. &lt;script src="../scripts/settingsEN.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have tried all these </p>
  
  <p><a href="http://api.jquery.com/jQuery.noConflict/" rel="nofollow noreferrer">http://api.jquery.com/jQuery.noConflict/</a></p>
  
  <p><a href="http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUsing_jQuery_with_Other_Libraries%26redirect%3Dno" rel="nofollow noreferrer">http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUsing_jQuery_with_Other_Libraries%26redirect%3Dno</a></p>
  
  <p><a href="http://www.w3schools.com/jquery/jquery_noconflict.asp" rel="nofollow noreferrer">http://www.w3schools.com/jquery/jquery_noconflict.asp</a></p>
  
  <p>I have tried all these </p>
  
  <pre><code> &lt;script type="text/javascript" src="other_lib.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   $.noConflict();
   // Code that uses other library's $ can follow here.
   &lt;/script&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code> &lt;script type="text/javascript" src="other_lib.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   $.noConflict();
   jQuery(document).ready(function($) {
   // Code that uses jQuery's $ can follow here.
    });
   // Code that uses other library's $ can follow here.
   &lt;/script&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>jQuery.noConflict();
  (function($) {
   $(function() {
    // more code using $ as alias to jQuery
   });
  })(jQuery);
  // other code using $ as an alias to the other library
  </code></pre>
  
  <p>but still not able to get the Solution  </p>
  
  <p>When I remove this code of slider, every thing works fine , no errors but the slider will not work</p>
  
  <pre><code> &lt;!--script for slider---&gt;
  
        &lt;script type="text/javascript"&gt;
  
    jQuery(document).ready(function($) {
      // We only want these styles applied when javascript is enabled
      $('div.navigation').css({'width' : '', 'float' : 'right'});
      $('div.content').css('display', 'block');
  
      // Initially set opacity on thumbs and add
      // additional styling for hover effect on thumbs
      var onMouseOutOpacity = 0.67;
      $('#thumbs ul.thumbs li').opacityrollover({
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
        exemptionSelector: '.selected'
      });
  
      // Initialize Advanced Galleriffic Gallery
      var gallery = $('#thumbs').galleriffic({
        delay:                     2500,
        numThumbs:                 15,
        preloadAhead:              10,
        enableTopPager:            true,
        enableBottomPager:         true,
        maxPagesToShow:            7,
        imageContainerSel:         '#slideshow',
        controlsContainerSel:      '#controls',
        captionContainerSel:       '#caption',
        loadingContainerSel:       '#loading',
        renderSSControls:          true,
        renderNavControls:         true,
        random:                    true,
        prevLinkText:              '',
        nextLinkText:              '',
        nextPageLinkText:          '',
        playLinkText:              '',
        pauseLinkText:             '',
        prevPageLinkText:          '',
        enableHistory:             false,
        autoStart:                 false,
        syncTransitions:           true,
        defaultTransitionDuration: 900,
        onSlideChange:             function(prevIndex, nextIndex) {
          // 'this' refers to the gallery, which is an extension of $('#thumbs')
          this.find('ul.thumbs').children()
            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
            .eq(nextIndex).fadeTo('fast', 1.0);
        },
        onPageTransitionOut:       function(callback) {
          this.fadeTo('fast', 0.0, callback);
        },
        onPageTransitionIn:        function() {
          this.fadeTo('fast', 1.0);
        }
      });
    });
  &lt;/script&gt;
  
  
  
    &lt;!--script end---&gt;
  </code></pre>
  
  <p><strong>Can anyone help?</strong></p>