jquery - 同位体画像のデモを使用するが、フィルタリングを含める方法

Question

自分用のポートフォリオサイトを作っています。私のページのアイソトープ レイアウトのテンプレートとして、アイソトープ JQuery イメージ デモhttp://isotope.metafizzy.co/demos/images.htmlを使用していますが、一部に含まれているフィルタリング機能を追加したいと考えています。他のデモページ。フィルタリング オプションを持つデモからオプション コードと思われるものを単純にコピーしようとしましたが、機能しません。

Answer 1

あなたがまだこのプロジェクトに取り組んでいることを願っています。私はまだ複数のフィルターを組み合わせて考えようとしていますが、データに対して 1 つのフィルター セットをどのように使用したかを次に示します。jquery コードから始めましょう。

<script type="text/javascript">

$(document).ready(function(){
    var $container = $('#content');

$container.isotope({
    filter: '*',
    animationOptions: {
    duration: 350,
    easing: 'linear',
    queue: false,}
});

    $('#prodnav a').click(function(){
      var selector = $(this).attr('prod-filter');
      $container.isotope({ 
      filter: selector,
      animationOptions: {
      duration: 350,
      easing: 'linear',
      queue: false,
   }
 });
   return false;
 });

</script>

ナビゲーションリストは次のとおりです。

<div id="prodnav">
<ul>
<li><a href="" prod-filter="*">All Products</a></li>
<li><a href="" prod-filter=".greenwidgetbox">Green Widget</a></li>
<li><a href="" prod-filter=".bluewidgetbox">Blue Widget</a></li>
<li><a href="" prod-filter=".orangewidgetbox">Orange Widget</a></li>
</ul>
</div>

そして最後に個別の商品イメージコード。同位体のサムネイル画像を使用し、シャドーボックスを使用して、クリックするとモーダル ウィンドウで画像を最大化しました。

<div class="greenwidgetbox">
    <h2 class="box-title">Shiny Green Widget</h2>
      <div class="box-img">
        <a href="images/shiny-green-widget.png" rel="shadowbox" title="Shiny Green Widget"><img src="images/shiny-green-widget-thumb.png"/></a>
       </div>
</div>