isotope imagesデモを使用するにはどうすればよいですか？フィルタリングを含める

Question

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

Answer 1

まだこのプロジェクトに取り組んでいないといけないと思いますが、これは誰かがアイソトープに画像を入れたいと思うのを助けるかもしれません。私はまだ複数のフィルターを組み合わせようとしていますが、ここで私のデータに1組のフィルターを使用しています。 jqueryのコードで始まるのをしてみましょう：

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

そして最後に、個々の商品画像のコードで：

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

ここでナビゲーションリストです。 isotopeのサムネイル画像を使用し、クリックするとモーダルウィンドウで画像を最大化するためにシャドーボックスを使用しました。

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