アイソトープフィルタはフィルタリングされたライトギャラリー画像のみを表示する

Question

私は自分のウェブサイト用のフィルタリングポートフォリオを作成したいと思っていますが、セットアップはすべて完了しましたが、アイソトープを使ってカテゴリをフィルタリングすると、私はイメージをクリックしてlightgalleryを起動すると、すべてのカテゴリのすべてのイメージが表示されます。

特定のカテゴリの画像をlightgalleryのスライドショーに表示したいとします。 私はいくつかの答えをスタックで見ましたが、私はshadowboxを実装する必要があると思います。しかし、どのようにわからない。

私を助けてください。

マイCodepen

//isotope Code 
$('#gallery').isotope({ 
    // options 
    itemSelector: '.revGallery-anchor', 
    layoutmode: 'fitrows' 
}); 
$('button').on('click', function() { 
    var filterValue = $(this).attr('data-filter'); 
$('#gallery').isotope({ filter: filterValue }); 
}); 

Answer 1

あなたが閉鎖あなたがlightGalleryを初期化するとき、あなたは現在のインスタンスを破棄するためにAPIを使用することができますし、同位体フィルタボタンをクリックしたときに再初期化を作成する場合。

閉鎖を作成し、lightGallery

$gallery = $('#gallery'); 

$gallery.lightGallery({...}); 

そして、あなたは、同位体フィルタ]ボタンをクリックすると、そのインスタンスを破棄し、再初期化しますが、ギャラリーになりたい要素のクラスに基づいて初期化します。そのクラスは、あなたが素晴らしいですここfilterValue

$gallery.data('lightGallery').destroy(true); 

$gallery.lightGallery({ 
    selector: filterValue.replace('*',''); 
}); 

http://codepen.io/mcoker/pen/KaWKvE