LightBox 破坏了 Isotope 过滤器和 Slick 滑块

Question

我正在为朋友的公司制作一个网站，我是 JQuery 的新手，该网站运行良好，它有一个旋转木马 header、两个不同的光滑滑块和一个带有一个同位素过滤器（一个投资组合图库）我希望用户能够扩展图库中的图像，所以我添加了灯箱，但是一旦我这样做了，我的同位素过滤器就停止了工作（连同我所有光滑的滑块，旋转木马不过滑块工作得很好。

我不明白为什么会这样，它给我的唯一错误是这个错误：

Uncaught TypeError: a.indexOf is not a function at pa.fn.init.pa.fn.load (lightbox-plus-jquery.min.js:24) at functions.js:10

这是我在 head 标签中的加载顺序：

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<!--js scripts load-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>

图库（使用同位素滤镜 + 灯箱缩放）：

<section class="main-section paddind" id="portfolio">
        <!--main-section-start-->
        <div class="container">
            <h2>Portfolio</h2>
            <h6>Fresh portfolio of designs that will keep you wanting more.</h6>
            <div class="portfolioFilter">
                <ul class="Portfolio-nav wow fadeIn delay-02s">
                    <li><a href="#" data-filter="*" class="current">Todos</a></li>
                    <li><a href="#" data-filter=".gondola">Gôndolas</a></li>
                    <li><a href="#" data-filter=".checkout">Check-outs</a></li>
                    <li><a href="#" data-filter=".aramado">Aramados</a></li>
                    <li><a href="#" data-filter=".pallet">Porta-Pallet</a></li>
                </ul>
            </div>

        </div>
        <div class="portfolioContainer wow fadeInUp delay-04s">
            <div class=" Portfolio-box gondola">
              <a href="img/portfolio/big/render1.png" data-lightbox="mygallery"><img src="img/portfolio/render1.png" alt=""></a>

            </div>

            <div class=" Portfolio-box gondola">
                <a href="img/portfolio/big/render3.png" data-lightbox="mygallery"><img src="img/portfolio/render3.png" alt=""></a>

            </div>
            <div class=" Portfolio-box pallet">
                <a href="img/portfolio/big/render4.png" data-lightbox="mygallery"><img src="img/portfolio/render4.png" alt=""></a>

            </div>
            <div class=" Portfolio-box pallet">
                <a href="img/portfolio/big/render5.png" data-lightbox="mygallery"><img src="img/portfolio/render5.png" alt=""></a>

            </div>
            <div class=" Portfolio-box pallet">
                <a href="img/portfolio/big/render5.png" data-lightbox="mygallery"><img src="img/portfolio/render5.png" alt=""></a>

            </div>

            <div class="Portfolio-box gondola">
                <a href="img/portfolio/big/render2.png" data-lightbox="mygallery"><img src="img/portfolio/render2.png" alt=""></a>

            </div>
        </div>
    </section>

这是我的 functions.js 文件：

    $(document).ready(function(e) {
        $('#test').scrollToFixed();
        $('.res-nav_click').click(function(){
            $('.main-nav').slideToggle();
            return false
        });
    });

    $(window).load(function(){
        $('.main-nav li a, .servicelink').bind('click',function(event){
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top - 102
            }, 1500,'easeInOutExpo');
            /*
            if you don't want to use the easing effects:
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1000);
            */
      if ($(window).width() < 768 ) {
        $('.main-nav').hide();
      }
            event.preventDefault();
        });
    })



$(window).load(function(){
  var $container = $('.portfolioContainer'),
      $body = $('body'),
      colW = 375,
      columns = null;
  $container.isotope({
    // disable window resizing
    resizable: true,
    masonry: {
      columnWidth: colW
    }
  });
  $(window).smartresize(function(){
    // check if columns has changed
    var currentColumns = Math.floor( ( $body.width() -30 ) / colW );
    if ( currentColumns !== columns ) {
      // set new column count
      columns = currentColumns;
      // apply width to container manually, then trigger relayout
      $container.width( columns * colW )
        .isotope('reLayout');
    }
  }).smartresize(); // trigger resize to set container width
  $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
         });
         return false;
    });
});

// slick functions

    $(document).on('ready', function () {
        $(".regular").slick({
             slidesToShow: 3,
             slidesToScroll: 1,
             autoplay: true,
             autoplaySpeed: 2000,
             dots: false
        });
    });

    $(document).on('ready', function () {
        $(".one").slick({
             slidesToShow: 1,
             slidesToScroll: 1,
             autoplay: true,
             autoplaySpeed: 2000,
             dots: true,
             prevArrow: false,
             nextArrow: false
        });
    });

我尝试使用 jQuery 无冲突模式，但它没有用，它只是给了我同样的错误。

Answer 1

这是一个愚蠢的错误，我在应该加载 lightbox.min.js 脚本的时候加载了 lightbox-plus-jquery.min.js，抱歉，现在已经解决了。

lightbox-plus 加载 lightbox 和 jquery 一起，当页面上没有添加 jquery 时使用。因此，如果 jquery 已添加到页面上，它将与 lightbox-plus 文件冲突。

参考 link - https://lokeshdhakar.com/projects/lightbox2/

LightBox 破坏了 Isotope 过滤器和 Slick 滑块

LightBox broke Isotope filter and Slick sliders

html

jquery

lightbox2

jquery-isotope

slick.js