Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67441

Why is my isotope filter gallery using isotope plugins not working?

$
0
0

I have made a image filter gallery using isotope plugin but it is not working, the images are showing and everything but when i click on the bike, all, engine and other section nothing happens.It should work and should change the image but it is not.I have given the source file of the isotope script and also downloaded the isotope script still it is not working.

What is the problem in my code and how do i solve it?

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

Here is the html part:-

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

Here is the javascript part:-

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

Viewing all articles
Browse latest Browse all 67441

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>