htmljqueryjquery-isotopeslick.jslightbox2

LightBox broke Isotope filter and Slick sliders


I'm making a website for a friend's business and I'm new to JQuery, the site worked fine, it has a carousel header, two different slick sliders and a gallery with an isotope filter (a portfolio gallery) I wanted the user to be able to expand the images in the gallery so I added lightbox, but as soon as I did it my isotope filter just stopped working (along with all my slick sliders, the carousel slider works just fine though).

I don't understand why this happens, the only error it gives me is this one:

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

this is my load order in the head tag:

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

The gallery (with the isotope filter + lightbox zoom):

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

this is my functions.js file:

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

I tried using the jQuery no conflict mode but it didn't work, it just gave me the same error.


Solution

  • This was such a silly mistake, I loaded the lightbox-plus-jquery.min.js when I should have loaded the lightbox.min.js script, sorry, it's solved now.

    lightbox-plus loads lightbox and jquery together, its used when no jquery is already added on page. So if jquery is already added on page it will conflict with lightbox-plus file.

    Reference link - https://lokeshdhakar.com/projects/lightbox2/