부트 스트랩 + 2 버전의 jquery

Question

웹 사이트를 구축하려고하는데 부트 스트랩 시스템과 jquery의 두 버전 (부트 스트랩 유효성 검사기 포함)을 사용할 때 몇 가지 문제가 있습니다.

우선, 2 가지 버전의 jquery에 대해 많은 질문을 이미 알고 있지만, 지난 2 일 동안 읽고 작업하면서이 작업을 시도했지만 그럴 수 없습니다! 이것이 내가 여기있는 이유입니다.

그래서, 내 머리 태그에서 나는 실행할 필요가있는 두 가지 버전을 설정했습니다. 1-는 드롭 다운 메뉴 및 양식 유효성 검사와 같이 부트 스트랩 스크립트를 작동시키는 것입니다. 2 - magnific 팝업 스크립트를 실행하는 것입니다.

이 지금까지 내 머리 코드입니다 : 내가 noConflict()와 함께 사용하기 위해 노력하고있어 스크립트의

<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> 

부분하지만 난 어떤 성공도 없었다.

이것은 내가 한 일입니다.

* 내가 JQuery와의 버전을 변경해야하는 스크립트가 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> 

사람이 좀 도와 주실 래요입니다? 내가 아이디어가 없기 때문에 나는 jquery에서 그다지 진보하지 않습니다.

감사합니다.

Answer 1

당신은 magnificPopup 먼저 magnificPopup에 대한 것을 포함하여, jQuery를 포함 jQuery.noConflictscript 2 사이에 태그를 실행해야합니다

<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

사용 require.js하고 필요한 jQuery를 버전의 어떤 모듈에 의존합니다. 예를 들어 다음

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' 
    } 
    } 
}); 

, 단순히 물론, 올바른 결과가 유도,

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); 
}); 

이

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