LightBox сломал фильтр Isotope и слайдеры Slick

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

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

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

это мой порядок загрузки в теге заголовка:

<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 без конфликтов, но это не сработало, просто выдало ту же ошибку.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
564
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

lightbox-plus загружает лайтбокс и jquery вместе, он используется, когда на странице еще не добавлен jquery. Поэтому, если jquery уже добавлен на страницу, он будет конфликтовать с файлом lightbox-plus.

Ссылка для справки - https://lokeshdhakar.com/projects/lightbox2/

Другие вопросы по теме