Почему моя галерея изотопных фильтров, использующая изотопные плагины, не работает? - PullRequest
Новая
       31

Почему моя галерея изотопных фильтров, использующая изотопные плагины, не работает?

0 голосов
/ 03 ноября 2019

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

В чем проблема в моем коде и как мне ее решить? 

    <script src="js/isotope.pkgd.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/isotope-docs.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Вот часть html: - 

<h1>Gallery</h1>
    <div class="portfolio-menu">
      <ul>
        <li class="active" data-filters="*">
          All
        </li>
        <li data-filters=".bike">Bikes</li>
        <li data-filters=".engine">Engines</li>
        <li data-filters=".custome">Custome-made</li>
      </ul>
    </div>
    <div class="portfolio-item">
      <div class="item engine">
        <img class="harley" src="img/gallery1.jpg">
      </div>
      <div class="item custom">
        <img class="harley" src="img/gallery2.jpg">
      </div>
      <div class="item custom">
        <img class="harley" src="img/gallery3.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery4.jpg">
      </div>
      <div class="item engine">
        <img class="harley" src="img/gallery5.jpg">
      </div>
      <div class="item custom">
        <img class="harley" src="img/gallery6.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery7.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery8.jpg">
      </div>
      <div class="item engine">
        <img class="harley" src="img/gallery9.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery10.jpg">
      </div>
    </div>

Вот часть javascript: - 

<script>
  $('.portfolio-item').isotope({
    itemSelector: '.item',
    layoutMode:'fitRows'
  });
$('.portfolio-menu ul li').click(function(){
  $('.portfolio-menu ul li').removeClass('active');
  $(this).addClass('active');

  var selector = $(this).attr('data-filter');
  $('.portfolio-item').isotope({
    filter: selector
  });
return false;
});

</script>
...