Bootstrap + 2 versions of jquery

Question

I'm trying to build a WebSite but i'm running into some porblems when it comes down to use 2 versions of jquery qith the bootstrap system (also with bootstrap validator).

First of all, i do already know there is a lot of questions in here about 2 versions of jquery, but i spent the last 2 days reading and trying to make this work, but i just can't! This is why i'm here.

So, in my head tag i had set up the 2 versions i need to run. 1- is to make the bootstrap scripts work, like the dropdown menu and the form validation. 2- is to run the magnific popup script.

This is my head code so far:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="validator/vendor/jquery/jquery-1.10.2.min.js"></script>

the part of the script i'm trying to use with the noConflict () but i had no success.

This is what i did.

*the script i need to change the version of the jquery is for the magnificpopup

<script>
jq1111 = jQuery.noConflict(true);
</script>
<script type="text/javascript">
jq1111(document).ready(function() {
    jq1111('.zoom-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
            verticalFit: true,
            titleSrc: function(item) {}
        },
            gallery: {
                enabled: true
                },
            zoom: {
                enabled: true,
                duration: 500, // don't foget to change the duration also in CSS
                opener: function(element) {
                    return element.find('img');
                }
            }

        });
    });
</script>

Can anyone please help me? Because i'm out of ideas and i'm not that advanced in jquery, of course.

Thanks!

Answer 1

You need to run the jQuery.noConflict between the 2 script tags that include jQuery, including the one for magnificPopup and magnificPopup first:

<script src="jquery-1.11.1.min.js"></script>
<script src="magnific-popup.min.js"></script>
<script type="text/javascript">
    var j1111 = jQuery.noConflict() ;
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        j1111.magnificPopup(/* ... */) ;
    });
</script>

Answer 2

Use require.js and make whatever module dependant of the necessary jQuery version. For example :

require.config({
  enforceDefine: true,
  baseUrl: '/js',
  shim: {
    'jquery@1.11.1': {
      exports: '$'
    },
    'jquery@2.1.1': {
      exports: '$'
    },
    'bootstrap@3.1.1': {
      deps: [ 'jquery' ], // use jQuery 2.1.1 !
      exports: '$'        // need to export something.... so... export jQuery!
    },
    'magnific': {
      deps: [ 'jquery@1.11.1' ],
      exports: '$.fn.magnificPopup'
    }
  },
  paths: {
    'jquery@1.11.1': 'http://code.jquery.com/jquery-1.11.1.min',  // or a CDN...
    'jquery@2.1.1': 'lib/jquery.min',        // local copy!,
    'bootstrap@3.1.1': 'lib/bootstrap.min',  // local copy!
    'magnific': 'http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min'
  },
  map: {
    '*': {
      'jquery': 'jquery@2.1.1',
      'bootstrap': 'bootstrap@3.1.1'
    }
  }
});

Then, simply require your jQuery library

require(['jquery', 'jquery@1.11.1', 'jquery@2.1.1', 'magnific'], function ($, $1, $2) {
  console.log($.fn.jquery, $.fn.magnificPopup);
  console.log($1.fn.jquery, $1.fn.magnificPopup);
  console.log($2.fn.jquery, $2.fn.magnificPopup);
});

Which, of course, will result in the correct output

2.1.1 undefined
1.11.1 function (n){_();var i=e(this);if("string"==typeof n)if("open"===n){var o,r=b?i.data("magnificPopup"):i[0].magnificPopup,a=parseInt(arguments[1],10)||0;r.items?o=r.items[a]:(o=i,r.delegate&&(o=o.find(r.delegate)),o=o.eq(a)),t._openClick({mfpEl:o},i,r)}else t.isOpen&&t[n].apply(t,Array.prototype.slice.call(arguments,1));else n=e.extend(!0,{},n),b?i.data("magnificPopup",n):i[0].magnificPopup=n,t.addGroup(i,n);return i}
2.1.1 undefined