LightBox сломал изотопный фильтр и скользящие ползунки - PullRequest
Новая
       7

LightBox сломал изотопный фильтр и скользящие ползунки

0 голосов
/ 24 мая 2018

Я делаю сайт для бизнеса друга и я новичок в JQuery, сайт работал нормально, у него есть заголовок карусели, два разных скользящих слайдера и галерея с фильтром изотопов (галерея портфолио), которую я хотелпользователь мог расширять изображения в галерее, поэтому я добавил лайтбокс, но как только я это сделал, мой изотопный фильтр просто перестал работать (вместе со всеми моими скользящими ползунками, ползунок карусели работает очень хорошо).

Я не понимаю, почему это происходит, единственная ошибка, которую он мне дает, это:

Uncaught TypeError: a.indexOf не является функцией pa.fn.init.pa.fn.load (lightbox-plus-jquery.min.js: 24) в 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 без конфликта, но он не работал, он просто выдал мне ту же ошибку.

1 Ответ

0 голосов
/ 24 мая 2018

Это была такая глупая ошибка, я загрузил lightbox-plus-jquery.min.js, когда мне нужно было загрузить скрипт lightbox.min.js, извините, теперь это решено.

...