アイソトープフィルタリングを使用してタグを一覧表示する

Question

アイソトープフィルタで自分のギャラリーをフィルタしたいと思います。私はLightgalleryを使って作品を展示しています。同位体で分類する必要があります。それはフィルタリングされていないか、私は間違っています。 私はlightgalleryイメージを私のポートフォリオとして表示するためにlistタグを使用しました。リストタグの下に同位体の参照はありません。私はjQueryの専門家ではないので、専門家の助言が必要です。

は、ここに私のCodepen、とjQueryは

$('#gallery').isotope({ 
    // options 
    itemSelector: '.galleryitem', 
    layoutMode: 'fitRows' 
}); 

Answer 1

同位体を呼び出すために残念ながら、fitRowsは（Desandroによる）を中心に使用することができcolumnWidthの、のような任意のメトリックを持っていないので、それはそのレイアウトではないのですこれを別々に行うためのコードを書くことなく簡単に中央揃えすることができます。 アイテムを中央に置くには、石積みのようなレイアウトを使用する必要があります。次のコードは、これがどのように機能するかを示し、フィルタリングの修正を追加しました。この質問には関係ありませんが、isotopeが呼び出される前にimagesloaded.jsを使用してイメージをロードすることをお勧めします。

$('#gallery').isotope({ 
// options 
itemSelector: '.galleryitem', 
percentPosition: true, 
masonry: { 
fitWidth: true 
    } 
    }); 
$('button').on('click', function() { 
var filterValue = $(this).attr('data-filter'); 
    $('#gallery').isotope({ filter: filterValue }); 
    });