Question

我正在创建一个投资组合网站来展示我的作品。我正在使用Light Gallery在我的网站上显示图像和视频。我想使用Isotope.js

添加Filtering选项

我无法弄清楚我的代码有什么问题。我在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');
  });
});

由于

Answer 1

检查浏览器控制台。 $lg is not defined - 如果你删除那些代码，似乎工作正常。 http://codepen.io/anon/pen/apmBEd

同位素过滤不适用于锚标记

1 个答案: