我有一個圖片庫的頁面,我正在使用jquery wookmark插件,並進行過濾。然後我想使用插件colorbox(這個wookmark已經在他們的插件中提供了一個例子),並且我能夠加入colorbox和過濾系統。在我腦海中的問題是,當我只是一個過濾器,而不是50張照片來顯示,只有5可見,我怎麼說colorbox只顯示這5個?jquery事件不起作用我第二次稱它爲
所以我初始化顏色框是這樣的:
$('li a').colorbox({
rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
});
然後在過濾器的單擊事件,我認爲最好的辦法是,每當有一個點擊,從所有影像的顏色框,並初始化顏色框再次只適用於活動課堂裏面的項目,像這樣:
var onClickFilter = function(event) {
var item = $(event.currentTarget), activeFilters = [];
item.toggleClass('active');
// Collect active filter strings
filters.filter('.active').each(function() {
activeFilters.push($(this).data('filter'));
});
handler.wookmarkInstance.filter(activeFilters, 'or');
//here i remove colorbox from every item
$.colorbox.remove();
//here i instantiate colorbox for active item
$('#tiles li.active a').colorbox({
rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
});
}
而且這種有效!例如,我使用100個圖像加載頁面,colorbox圖庫顯示100個圖像以顯示;我點擊一個過濾器,我得到10個可見的圖像,colorbox提供10個圖像顯示,我點擊另一個過濾器添加更多的圖像,我得到24圖像可見,colorbox刷新它的畫廊到24.事情是,如果我再次點擊相同的最後一個過濾器去激活它,colorbox不再看到只有10個圖像,但24。