NextGen库破坏其他jQuery插件

Question

我刚刚在我的站点上安装了NextGen画廊和NextGen Plus，它的工作原理与我的图库中描述的一样。然而，它破坏了我的主页上的浮油滑块和我的博客页面上的同位素砖石结构。我知道NextGen是个问题，因为当我禁用它时，光滑的滑块和同位素博客页面都能很好地工作。我如何确定问题出在哪里？我在哪里找冲突？

编辑：当NextGen被激活时，看着控制台，我看到了这个错误：“未定义的TypeError:未定义不是一个函数(匿名函数)”。我单击该错误，它将我引用JS文件$(document).ready(function(){中的第一行。这句话怎么了？我试着移除它，但后来它向我抛出了其他的错误。我试着注释掉JS文件中的每个函数，但问题始终存在。如果这有帮助的话，我已经复制了下面JS文件的全部内容。

// Slick Carousel for Blog on Front Page
$(document).ready(function(){
    $('.blog-post').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 3,
      touchMove: false,
      slidesToScroll: 1,
      arrows: true,
      autoplay: false,
      dots: false,
      responsive: [
        {
          breakpoint: 1025,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 641,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false
          }
        }
      ]
    });
});

// Slick Post Slider
/*
$(document).ready(function(){
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: true,
        centerMode: true,
        focusOnSelect: true,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false
    });
});
*/

// Custom Services Dropdown
    function DropDown(el) {
        this.dd = el;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;

            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                event.stopPropagation();
            }); 
        }
    }

    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {
            // all dropdowns
            $('.wrapper-dropdown-5').removeClass('active');
        });

    });

// Isotope (Standard)
/*
    // initialize Isotope
    var container = $('.isotope-container');
    container.isotope({
      // options
      itemSelector: '.isotope-item',
      layoutMode: 'masonry'
    });

    // filter items on button click
    $('#filters').on( 'click', 'button', function() {
      var selector = $(this).attr('data-filter');
      container.isotope({ filter: selector });
    });

    // layout Isotope again after all images have loaded
    container.imagesLoaded( function() {
      container.isotope('layout');
    });
*/

// Isotope (with Infinite Scroll)
  $(function(){

    var container = $('.isotope-container');

    container.imagesLoaded(function(){
      container.masonry({
        itemSelector: '.isotope-item',
        layoutMode: 'masonry'
      });
    });

    // filter items on button click
    $('#filters').on( 'click', 'button', function() {
      var selector = $(this).attr('data-filter');
      container.isotope({ filter: selector });
    });

    container.infinitescroll({
      navSelector  : '.pagination',    // selector for the paged navigation 
      nextSelector : '.next-post a',  // selector for the NEXT link (to page 2)
      itemSelector : '.isotope-item',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          msgText: "loading new posts",
          img: 'http://uic.slamagency.com/wp-content/uploads/2014/10/uic-loading.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  });

Answer 1

这是一个经常发生的jQuery冲突。要解决这个问题，只需将$符号分配给jQuery，如下所示：

var $ = jQuery;

您应该在这一行之前添加它：

$(document).ready(function(){

Answer 2

恐怕你解决不了这个问题。您可以在NextGEN图片库网站上找到可能与其他插件发生冲突且无法解决的信息。

我的建议是寻找其他画廊插件。

Answer 3

如果有人有同样的问题，下面是我找到的答案。我必须将我的所有定制JS包装在以下内容中：

jQuery(function($){ 
   // Custom JS functions here.
});

现在，我所有的JS都能工作，NextGen也能工作。