jqueryがビデオボックスとカスタムコードとの競合

Question

私は3つのプラグインとカスタムコードを使用するページを持っています。

1. Fullscreenr
2. ScrollTo
3. VideoBox

私のカスタムコードは、ちょうど（私がそのコードaswellを投稿します）メニュー内の項目のCSSスタイルを変更することです。

私の問題は、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

あなたはまた、複数のライブラリは、Webページで同じ$を使用する場合、これは動作します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>