Joomla 3.x jQuery конфликт между библиотекой jQuery mootools, но noConflict, похоже, не работает

Question

Joomla 3.x jQuery конфликт между библиотекой jQuery mootools, но noConflict, похоже, не работает

0

У меня есть сайт joomla, и в статье я вызываю HTML-страницу.

На этой странице html я создал что-то с bx-слайдером в сочетании с вертикальным скроллером, так что привязывающие ссылки, которые плавно прокручиваются до привязки на странице (см. Учебное пособие adriantomic.se jquery localscroll tutorial

Это прекрасно работает! Нет проблем.

Но теперь я называю эту страницу в статье joomla по php:. Это тоже не проблема. Но этот шаблон от joomlart (puresite), и я получаю ошибку конфликта, которую я не понимаю:

TypeError: jmega.getElement is not a function
http://reset.nl/templates/puresite/js/mega.rjd.js
Line 25

TypeError: $(...).ready is not a function
http://reset.nl/media/system/js/mootools-core.js
Line 28

Я пробовал разные варианты noConflict, но это не помогает. Если я изменяю jQuery (document.function($), то кажется, что некоторая функция работает в бесконечном цикле.

У кого-нибудь есть идея, как это решить?

Нико. Вот мой код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <!-- bxSlider CSS file -->
        <link href="/components/com_scroll_content/lib/jquery.bxslider.css" rel="stylesheet" />

        <!-- Some CSS -->
       <style type="text/css">
       /* CSS for the big boxes */
           .box {
              width: 300px;
              height: 300px;

              color: #fff;
              padding: 10px;

              margin: 100px 0 0 0;
           }

           #box1 {
              margin: 300px 0 0 0;
              background: blue;
           }

           #box2 {
              background: red;
           }

           #box3 {
              background: green;
           }

           #box4 {
              background: gray;
           }

           /* CSS for the small boxes that will scroll inside a div */

           #small-box-container {
              border: 1px solid black;
              padding: 20px;
              width: 300px;
              height: 200px;

              overflow: scroll;
           }

           .small-box {

              color: #fff;
              padding: 10px;

              width: 200px;
              height: 200px;
              margin: 0 0 50px 0;
           }

           #small-box1 {
              background: blue;
           }

           #small-box2 {
              background: red;
           }

           #small-box3 {
              background: green;
           }
       </style>

        <!-- jQuery library (served from Google) -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <!-- Load jQuery This is from the joomlaart template-->
        <!--<script src="/templates/ResetFashion/js/jquery/jquery.noconflict.js"></script>-->
        <!-- bxSlider Javascript file -->
        <script src="/components/com_scroll_content/js/jquery.bxslider.min.js"></script>

        <!-- Load ScrollTo -->
        <script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

        <!-- Load LocalScroll -->
        <script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

        <script>

            //var $jQ = jQuery.noConflict();
            $(document).ready(function(){
            //(function(jQ){
            //  jQ(window).load(function(){

                $('.bxslider').bxSlider({
                    minSlides: 1,
                    maxSlides: 2,
                    slideWidth: 170,
                    slideMargin: 10,
                    responsive: true
                });

                // Scroll the whole document
              $('#box-links').localScroll({
                 target:'body'
              });

              // Scroll the content inside the #scroll-container div
              $('#small-box-links').localScroll({
                 target:'#small-box-container'
              });
            });

        //})(jQuery);
        </script>
    </head>
    <body>

        <div id="small-box-links">      
            <ul class="bxslider">
              <li><a href="#small-box1"><img src="/components/com_scroll_content/images/trees.jpg" /></a></li>
              <li><a href="#small-box2"><img src="/components/com_scroll_content/images/tree_root.jpg" /></a></li>
              <li><a href="#small-box3"><img src="/components/com_scroll_content/images/houses.jpg" /></a></li>
              <li><img src="/components/com_scroll_content/images/hill_road.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/me_trees.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/hill_trees.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/mountain.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/houses.jpg" /></li>
            </ul>
        </div>

        <div id="small-box-container">
            <div id="small-box1" class="small-box">Small-Box #1</div>
            <div id="small-box2" class="small-box">Small-Box #2</div>
            <div id="small-box3" class="small-box">Small-Box #3</div>
        </div>

    </body>
</html>

nkamp 22 март 2014, в 22:26

Источник

Теги:

jquery

conflict

1 ответ

Ещё вопросы

itsYuuki · Answer 1 · 2014-03-23T03-29-00.000Z

Я переписал код jquery:

<script>
        $.noConflict();
        $(document).ready(function($){
        //(function(jQ){
        //  jQ(window).load(function(){

            $('.bxslider').bxSlider({
                minSlides: 1,
                maxSlides: 2,
                slideWidth: 170,
                slideMargin: 10,
                responsive: true
            });

            // Scroll the whole document
          $('#box-links').localScroll({
             target:'body'
          });

          // Scroll the content inside the #scroll-container div
          $('#small-box-links').localScroll({
             target:'#small-box-container'
          });
        });

    //})(jQuery);
    </script>

Hpoe эта работа для вас.