2017-01-15 88 views
0

我創建一個投資組合網站展示我的作品。我正在使用Light Gallery在我的網站上顯示圖片和視頻。我想通過使用Isotope.js添加篩選選項同位素過濾不起作用的錨標記

我無法弄清楚我的代碼有什麼問題。 我已經安裝了一支筆CodePen

請隨時添加到代碼。

// external js: isotope.pkgd.js 

// init Isotope 
var $grid = $('.nlg1').isotope({ 
    itemSelector: '.revGallery-anchor', 
    layoutMode: 'fitRows' 
}); 
// filter functions 
var filterFns = { 
    // show if number is greater than 50 
    numberGreaterThan50: function() { 
    var number = $(this).find('.number').text(); 
    return parseInt(number, 10) > 50; 
    }, 
    // show if name ends with -ium 
    ium: function() { 
    var name = $(this).find('.name').text(); 
    return name.match(/ium$/); 
    } 
}; 
// bind filter button click 
$('.filters-button-group').on('click', 'button', function() { 
    var filterValue = $(this).attr('data-filter'); 
    // use filterFn if matches value 
    filterValue = filterFns[ filterValue ] || filterValue; 
    $grid.isotope({ filter: filterValue }); 
}); 
// change is-checked class on buttons 
$('.button-group').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'button', function() { 
    $buttonGroup.find('.is-checked').removeClass('is-checked'); 
    $(this).addClass('is-checked'); 
    }); 
}); 

感謝

回答

1

檢查瀏覽器的控制檯。 $lg is not defined - 如果你刪除任何代碼,似乎工作正常。 http://codepen.io/anon/pen/apmBEd

+0

嗨Micheal, 我已經在codepen和我的項目中做了這些改變。但它不在我的項目中工作。還應該添加其他內容。論壇中有人向我介紹了imageloaded.js。我應該使用它 – Kamalakannan

+0

@Kamalakannan當我在codepen中進行過濾時,過濾工作正常。你說這在codepen中不起作用?怎麼了? –

+0

不,我說它不在我的本地主機項目中工作。 Codepen它的工作.. – Kamalakannan