Search code examples
javascriptjqueryjquery-pluginsfancybox

If you include 2 version of jQuery in a page how do you restrict a plugin to just one of them?


So this question isn't as crazy as it might sound at first. I'm developing a piece of javascript code to drop into my client's pages. What I'm worried about is if they are using another version of jQuery on their site.

I know from the Jquery docs that something like this should work.

var dom = {};
dom.query = jQuery.noConflict(true);

The problem is I am also using some jquery plugins, namely fancybox and mousewheel. So how can I make sure my version of jQuery is the only one that can use those plugins. I don't want a conflict to happen if one of our clients happens to use the same ones in their pages but different versions.

The only definite way I can think of right now is to modify the plugins so they only call dom.query


Solution

  • There is a trick you could use. If your version of jQuery is second which loads, you will need first move to safety theirs version before you load it, something like this

    <script type="text/javascript">
        (function($){
           var theirs_jquery = $;
        })(jQuery);
    </script>
    

    Then add your jQuery version script include tag

    <script src="link/to/my/jquery.js"></script>
     <!-- add your plugins -->
    <script src="link/to/my/jquery/plugins/plugin1.js"></script>
    <script src="link/to/my/jquery/plugins/plugin2.js"></script>
    

    then add another script block with folowing

    <script type="text/javascript">
    (function(){
        var $$ = jQuery; // this is your shortcut
        var $ = theirs_jquery; // put back their version
    })(jQuery);
    </script>
    

    after this you can access your jquery version with $$ shortcut