Question

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

我不明白为什么会发生这种情况，它给我的唯一错误就是这个：

未捕获的TypeError：a.indexOf不是函数 at pa.fn.init.pa.fn.load（lightbox-plus-jquery.min.js：24）在functions.js：10

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

＆＃13;

<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>

＆＃13;

画廊（同位素滤镜+灯箱缩放）：

＆＃13;

<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>

＆＃13;

这是我的functions.js文件：

＆＃13;

    $(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
        });
    });

＆＃13;

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

Answer 1

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

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

1 个答案: