NextGen Gallery 打破了其他 jQuery 插件答案

【问题标题】：NextGen Gallery Breaks Other jQuery PluginsNextGen Gallery 打破了其他 jQuery 插件
【发布时间】：2016-01-08 00:51:08
【问题描述】：

我刚刚在我的网站上安装了NextGen Gallery 和 NextGen Plus，它的工作原理与我的画廊中描述的一样。但是，它破坏了我主页上的Slick 滑块和我博客页面上的Isotope 砌体布置。我知道 NextGen 是问题所在，因为当我停用它时，Slick 滑块和 Isotope 博客页面都可以正常工作。我如何确定问题所在？我在哪里寻找冲突？

编辑： 激活 NextGen 后，查看控制台，我看到此错误：“Uncaught TypeError: undefined is not a function (anonymous function)”。我单击错误，它会将我指向我的 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 ); 
        });
      }
    );

  });

【问题讨论】：

它是否抛出了 javascript (jQuery) 或 PHP (Wordpress) 错误？它显示了哪些错误消息？
据我所知，它没有给出任何错误消息。 NextGen 画廊工作正常。只是其他插件破坏了......
你检查控制台了吗？
@pr1nc3 未激活NextGen时查看控制台，没有错误。在激活 NextGen 时查看它，我在我的 js 文件中收到错误“Uncaught TypeError: undefined is not a function”。但是由于它没有告诉我哪个函数有错误，我怎么知道要修复什么？

标签： jquery wordpress jquery-isotope nextgen-gallery

【解决方案1】：

这是一个经常发生的 jQuery 冲突。要解决它，您只需将$ 符号分配给jQuery，如下所示：
var $ = jQuery;
您应该在此行之前添加它：
$(document).ready(function(){

【讨论】：

在 2020 年仍然有效，使用 NextGen Gallery 3.3.6 和 jQuery 3.5.1

【解决方案2】：

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

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

【讨论】：

我尝试在 NextGen 网站和谷歌上搜索并在 Wordpress 论坛上寻求帮助，但我没有任何运气。猜猜是时候寻找其他东西了。 :(

【解决方案3】：

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

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

现在我所有的 JS 都可以正常工作，NextGen 也可以正常工作。

【讨论】：