Конфликтующие вызовы Jquery, кажется, не могут заставить одно работать с другим - PullRequest
0 голосов
/ 27 октября 2011

Так что я читал посты других людей по этой проблеме и до сих пор не могу заставить мою работать независимо от того, как я ее организую, так или иначе.

По сути, у меня есть галерея с ползунком и div, в котором я хочу заменить контент, на данный момент работает только ползунок. Вот что у меня в голове

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>

Итак, первое - это, очевидно, мой вызов jquery, а затем - слайдер, который я не создал, но нашел в Интернете.

Тогда на моей странице есть следующий код, чтобы вызвать это,

<div id="biocontent">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit nec sem iaculis vitae laoreet sem convallis. Donec sed lorem ante, quis fermentum nisl. Nullam adipiscing fermentum rhoncus. Aenean dui lectus, condimentum sed aliquet a, euismod vitae dui. Donec tempus faucibus tortor, feugiat fringilla nibh posuere eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a elit ut quam laoreet venenatis. Proin pharetra semper interdum. Phasellus porttitor imperdiet libero. Aenean ultricies rhoncus metus eget semper.
<br /><br />
Morbi rutrum ornare tortor, quis aliquam felis commodo et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed justo mauris, congue nec porttitor non, vehicula sed nisi. Praesent ultrices euismod massa, sit amet semper nisi elementum sit amet. Sed ut facilisis erat. Sed vestibulum ullamcorper magna, id euismod mauris posuere id. Aenean ac euismod mauris. Aliquam non mi ac sapien commodo adipiscing. Suspendisse nec felis a est convallis scelerisque. Mauris tempus pharetra euismod.

    </div>

    <div id="tS2" class="bioworkscroller">
        <div class="bioscollerContainer">
            <div class="bioscoller">

        <a href="testvid.html"><img src="img/thumbs/img3.jpg" /></a>
        <a href="#"><img src="img/thumbs/img4.jpg" /></a>
        <a href="#"><img src="img/thumbs/img5.jpg" /></a>


            </div>
        </div>
<a href="#" class="bioscollerPrevButton"></a>
<a href="#" class="bioscollerNextButton"></a>
    </div>

и затем ниже, у меня есть весь мой javascript для вызова и слайдера ajax,

   (function($) { 
   $(document).ready(function(){   
$("#links a").bind("click", function(e){ 
    e.preventDefault();
    var pageLocation = $(this).attr("href");
   $.ajax({ 
    url: pageLocation, 
    success: function(data){ 
        $("#biocontent").html(data); 
    },
    dataType : "html"
     });
});
}); })(jQuery)
jQuery.noConflict(); 
(function($){
window.onload=function(){ 
$("#tS1").thumbnailScroller({ 
    scrollerType:"hoverAccelerate", 
    scrollerOrientation:"horizontal", 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
$("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
$("#tS3").thumbnailScroller({ 
    scrollerType:"hoverPrecise", 
    scrollerOrientation:"vertical", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
 }
 })(jQuery);

У меня есть переключатель ajax, работающий в своем собственном файле без ползунка, но я не могу заставить их работать, я чувствую, что это как-то связано с вызовом jQuery.noConflict (), но не могу понять, как его получить вокруг этого, когда я запускаю его в консоли javascript, никаких ошибок не возникает.

Любая помощь будет принята с благодарностью

Ответы [ 3 ]

1 голос
/ 27 октября 2011

Поскольку $ (document) .ready - это намного лучше оболочка для window.onload, удалите его и упакуйте в один документ.

(function($) { 
$(document).ready(function(){   
      $("#links a").bind("click", function(e){ 
         e.preventDefault();
         var pageLocation = $(this).attr("href");
         $.ajax({ 
              url: pageLocation, 
              success: function(data){ 
              $("#biocontent").html(data); 
           },
           dataType : "html"
         });
   });

   $("#tS1").thumbnailScroller({ 
       scrollerType:"hoverAccelerate", 
       scrollerOrientation:"horizontal", 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:800, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });

   $("#tS2").thumbnailScroller({ 
       scrollerType:"clickButtons", 
       scrollerOrientation:"horizontal", 
       scrollSpeed:2, 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:600, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });
   $("#tS3").thumbnailScroller({ 
       scrollerType:"hoverPrecise", 
       scrollerOrientation:"vertical", 
       scrollSpeed:2, 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:800, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });


}); 
})(jQuery)

Я не вижу причин использовать jQuery.noConflict (), или вы используете какие-либо не jQuery-скрипты на своей странице?

0 голосов
/ 27 октября 2011

Попробуйте это:

$(function() {

    $("#links a").bind("click", function(e) {
        e.preventDefault();
        var pageLocation = $(this).attr("href");
        $.ajax({
            url: pageLocation,
            success: function(data) {
                $("#biocontent").html(data);
            },
            dataType: "html"
        });
    });


    $("#tS1").thumbnailScroller({
        scrollerType: "hoverAccelerate",
        scrollerOrientation: "horizontal",
        scrollEasing: "easeOutCirc",
        scrollEasingAmount: 800,
        acceleration: 4,
        scrollSpeed: 800,
        noScrollCenterSpace: 10,
        autoScrolling: 0,
        autoScrollingSpeed: 2000,
        autoScrollingEasing: "easeInOutQuad",
        autoScrollingDelay: 500
    });
    $("#tS2").thumbnailScroller({
        scrollerType: "clickButtons",
        scrollerOrientation: "horizontal",
        scrollSpeed: 2,
        scrollEasing: "easeOutCirc",
        scrollEasingAmount: 600,
        acceleration: 4,
        scrollSpeed: 800,
        noScrollCenterSpace: 10,
        autoScrolling: 0,
        autoScrollingSpeed: 2000,
        autoScrollingEasing: "easeInOutQuad",
        autoScrollingDelay: 500
    });
    $("#tS3").thumbnailScroller({
        scrollerType: "hoverPrecise",
        scrollerOrientation: "vertical",
        scrollSpeed: 2,
        scrollEasing: "easeOutCirc",
        scrollEasingAmount: 800,
        acceleration: 4,
        scrollSpeed: 800,
        noScrollCenterSpace: 10,
        autoScrolling: 0,
        autoScrollingSpeed: 2000,
        autoScrollingEasing: "easeInOutQuad",
        autoScrollingDelay: 500
    });

});
0 голосов
/ 27 октября 2011

Не зная, правильно ли вы вызываете скроллер, есть еще несколько проблем, которые необходимо решить, прежде чем углубляться:

  1. Возможно, я ошибаюсь, но я не думаю, что вам нужен самореализующийся jQuery-обертка (шаблон модуля?) вы захотите использовать]
  2. Вам не нужен noConflict, так как у вас есть только jQuery на странице, без других фреймворков
  3. У вас есть вызов window.onload. Но это (вроде) то, что готовый документ уже делает. Чтобы быть более точным, есть разница (и jQuery может также сделать окно готовым), но для ваших целей вам это не нужно. Готового документа будет не только достаточно, но и лучше.

Насколько я понимаю, это то, что вы собираетесь делать:

$(document).ready(function(){   // or shorthand version thereof

  $("#links a").bind("click", function(e){ 
    e.preventDefault();
    var pageLocation = $(this).attr("href");
    $.ajax({ 
      url: pageLocation, 
      success: function(data){ 
        $("#biocontent").html(data); 
      },
      dataType : "html"
    });
  });

  $("#tS1").thumbnailScroller({ 
    scrollerType:"hoverAccelerate", 
    scrollerOrientation:"horizontal", 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
  });

  $("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
  });

  $("#tS3").thumbnailScroller({ 
    scrollerType:"hoverPrecise", 
    scrollerOrientation:"vertical", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
  });
});

С другой стороны: вы можете значительно уменьшить количество повторений, передавая карту общих параметров в каждый из ваших вызовов thumbnailScroller (). В случае, если скроллеры могут иметь другое поведение, вы можете использовать .extend для объединения карт (базовых и расширенных) вместе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...