конфликт jquery с видеобоксом и пользовательским кодом

Question

Хорошо, у меня есть страница, которая использует 3 плагина и пользовательский код.

1. Fullscreenr
2. ScrollTo
3. VideoBox

Мой пользовательский код просто меняет стиль CSS элементов в меню (я также опубликую этот код).

Моя проблема в том, чтоFullscreenr и ScrollTo работали нормально, но когда я хочу добавить VideoBox, всплывающее окно видео не хочет работать, все, что он делает, это перенаправляет на страницу YouTube.Когда я проверяю страницу (Chrome), она показывает эту ошибку:

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

Это будет работать, если несколько библиотек используют один и тот же $ на веб-странице.

(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

Вы должны использовать noConflict, поскольку вы также используете 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>