同位素過濾器只顯示過濾的光廊圖片

我想爲我的網站創建一個過濾組合，我已經設置了一切，但事情是，當我使用Isotope過濾一個類別，當然它會過濾出來，但是當我點擊圖像並啓動lightgallery，它顯示所有類別的所有圖像。同位素過濾器只顯示過濾的光廊圖片

我希望特定類別的圖像在lightgallery的幻燈片中可見。我看到一些堆棧中的答案，我想我需要實現一個shadowbox。但不知道如何。

請幫幫我。

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

來源

2017-01-16 Kamalakannan

如果創建一個封閉在初始化lightGallery，您可以使用API來破壞目前的情況下，當你點擊同位素過濾器按鈕重新初始化。

創建一個封閉和初始化lightGallery

$gallery = $('#gallery'); 

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

當你點擊同位素過濾器按鈕，摧毀實例，並基於類要在畫廊中元素的重新初始化。那類是filterValue這裏

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

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

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

來源

2017-01-19 17:39:59

你是真棒，你已經做了一遍。但「所有」類別不工作，我猜它是因爲它有一個用於數據過濾的星號（*）。請看看可以做些什麼。 – Kamalakannan

'selector：filterValue.replace（'*'，''）' - http://codepen.io/mcoker/pen/KaWKvE –

謝謝Micheal。它的工作完美。 – Kamalakannan

同位素過濾器只顯示過濾的光廊圖片

回答

相關問題