石積みでアイソトープグリッドをフィルタリングする

jqueryプラグインアイソトープで画像ギャラリーをフィルタリングしようとしていますが、何らかの理由で実際のフィルタリングを行うことができないのですが、私は間違っている。私は2つのクラス "transition"と "metal"を追加し、ボタンを使って各クラスの画像をフィルタリングしようとしています。石積みでアイソトープグリッドをフィルタリングする

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
    <title>Bootstrap 101 Template</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
</head> 
<body> 

    <div class="button-group filter-button-group"> 
    <button data-filter="*">show all</button> 
    <button data-filter=".metal">metal</button> 
    <button data-filter=".transition">transition</button> 
</div> 
    <div style="padding:50px;">   
<h1>Photography</h1> 
<p>This is an assortment of photographs I have taken.</p> 
    </div> 




    <div class="container-fluid"> 
     <div class="grid"> 
      <div class="grid-sizer col-xs-6 col-sm-4 col-md-3 col-lg-2"></div> 

      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001079221497.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001116000079.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001141038889.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001176452626.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001209214386.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001224117612.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001316404158.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file000132701536.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001376718168.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001454659375.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001545806234.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001565782100.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001601969844.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001608482449.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001625591306.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001637922945.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001706961259.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001735386118.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001750264747.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001792779106.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001817248786.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001896291699.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001958769599.jpg"> 
       </div> 
      </div> 
     </div> 
    </div> 
      <div class="parallax-window" id="contact" class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-1.jpg"> 
    </div> 
    <div class="parallax-window" id="contact" class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-2.jpg"> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/isotope.pkgd.min.js"></script> 
    <script src="js/parallax.min.js"></script> 
    <script> 
    $('.grid').isotope({ 
    itemSelector: '.grid-item', 
    percentPosition: true, 
    masonry: { 
    columnWidth: '.grid-sizer' 
    } 
}); 
     $('.filter-button-group').on('click', 'button', function() { 
    var filterValue = $(this).attr('data-filter'); 
    $grid.isotope({ filter: filterValue }); 
}); 




</script> 
</body> 
</html>

は非常に多くのリンクがない場合、いくつかの助け:)

出典

2016-08-17 Indiana Porter

を認めるか、知ることは難しいのですが、1つの事は、あなたが宣言されていないある変数$グリッドあるjsfiddleでしょう。あなたのコードのように、宣言された変数せずにこれを試してみてください。それに

$('.filter-button-group').on('click', 'button', function() { 
var filterValue = $(this).attr('data-filter'); 
$('.grid').isotope({ filter: filterValue }); 
});

またはこの宣言：すっごくずっと

var $grid = $('.grid'); 
$grid.isotope({ 
itemSelector: '.grid-item', 
percentPosition: true, 
masonry: { 
columnWidth: '.grid-sizer' 
} 
}); 
    $('.filter-button-group').on('click', 'button', function() { 
var filterValue = $(this).attr('data-filter'); 
$grid.isotope({ filter: filterValue }); 
});

出典

2016-08-18 01:47:22 Macsupport

感謝を！あなたは伝説です！ –

石積みでアイソトープグリッドをフィルタリングする

答えて

関連する問題