jquery가 비디오 박스 및 사용자 정의 코드와 충돌합니다.

Question

나는 3 개의 플러그인과 사용자 정의 코드를 사용하는 페이지를 가지고 있습니다. ScrollTo

Fullscreenr

1. VideoBox

단지 메뉴에있는 항목의 CSS 스타일을 변경하는 것입니다 내 사용자 지정 코드 (내가 그 코드 aswell를 게시합니다).

내 문제는 Fullscreenr과 ScrollTo가 정상적으로 작동하지만 VideoBox를 추가하려고 할 때 비디오 팝업이 작동하지 않는 것은 YouTube 페이지로 리디렉션된다는 것입니다. 이 라인에

Uncaught TypeError: Object #<Object> has no method 'setProperty' 

: 나는 페이지 (크롬)을 검사 할 때이 오류가 표시

this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body); 

나는 $ .noConflict()를 사용하여 시도했다; 이제 모든 다른 플러그인을 제거하면 작동하지만 작동하지 않으면 작동하지 않습니다. 이 문제를 해결하기 위해 내가 할 수있는 일을 누군가가 알고 있기를 바랍니다.

<script type="text/javascript" src="js/mootools.js"></script> 
<script type="text/javascript" src="js/swfobject.js"></script> 
<script type="text/javascript" src="js/videobox.js"></script> 

<!-- IF I REMOVE FROM HERE DOWN VIDEOBOX WORKS --> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    <!-- 
     // You need to specify the size of your background image here (could be done automatically by some PHP code) 
     var FullscreenrOptions = { width: 1024, height: 439, bgID: '#bgimg' }; 
     // This will activate the full screen background! 
     jQuery.fn.fullscreenr(FullscreenrOptions); 
    //--> 
</script> 
<script type='text/javascript' src='js/jquery.min.js'></script> 
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script> 
<script type='text/javascript' src='js/init.js'></script> 
<script language="javascript"> 

    function GotoSection(divid) 
    { 
     $('#realBody').scrollTo('#' + divid, 800, {duration:3000}); 
     switch(divid) 
     { 
      case "home": 
      $("#mhome").attr('class', 'selected'); 
      $("#mvids").attr('class', 'non'); 
      $("#meventos").attr('class', 'non'); 
      $("#mfotos").attr('class', 'non'); 
      $("#mcontact").attr('class', 'non');                 
      break; 

      case "vids": 
      $("#mhome").attr('class', 'non'); 
      $("#mvids").attr('class', 'selected'); 
      $("#meventos").attr('class', 'non'); 
      $("#mfotos").attr('class', 'non'); 
      $("#mcontact").attr('class', 'non');                 
      break; 

      case "eventos": 
      $("#mhome").attr('class', 'non'); 
      $("#mvids").attr('class', 'non'); 
      $("#meventos").attr('class', 'selected'); 
      $("#mfotos").attr('class', 'non'); 
      $("#mcontact").attr('class', 'non'); 
      break; 

      case "fotos": 
      $("#mhome").attr('class', 'non'); 
      $("#mvids").attr('class', 'non'); 
      $("#meventos").attr('class', 'non'); 
      $("#mfotos").attr('class', 'selected'); 
      $("#mcontact").attr('class', 'non'); 
      break; 

      case "contact": 
      $("#mhome").attr('class', 'non'); 
      $("#mvids").attr('class', 'non'); 
      $("#meventos").attr('class', 'non'); 
      $("#mfotos").attr('class', 'non'); 
      $("#mcontact").attr('class', 'selected');              
      break; 
     } 

    } 


</script> 

더 좋은 스크립트가 있으면 사용할 수있는 모든 제안을 환영합니다.

Answer 1

를 사용하는 것처럼 당신은 noConflict를 사용해야합니다.

(function($){ 

//Write your jQuery code here as usual using $. 

})(jQuery); 

여기서 익명 함수를 정의합니다.이 함수는 유일한 인수로 jQuery를 사용합니다. 위의 함수에서 $로 매핑되면 코드가 예상대로 작동합니다. 이런 일을 아주 잘 할 수 있습니다.

(function($){ 
    $(document).ready(function(){ 
     //Write your jQuery code here as usual using $. 
    }); 
})(jQuery); 

Answer 2

당신은 또한 여러 라이브러리 웹 페이지에서 같은 $를 사용하는 경우이 작동 Mootools의

<script type="text/javascript" src="js/mootools.js"></script> 
<script type="text/javascript" src="js/swfobject.js"></script> 
<script type="text/javascript" src="js/videobox.js"></script> 

<!-- IF I REMOVE FROM HERE DOWN VIDEOBOX WORKS --> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $.noConflict(); 
    // Code that uses other library's $ can follow here. 
    //from here you must use jQuery instead of $ or you could do 

    jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
    }); 


</script>