我在 Wordpress 中使用Vitrux主题,它使用Isotope jQuery 插件来显示作品集。Isotope 允许使用类别对项目进行排序,但在主题内,一次只能按一个类别排序(例如“年份”或“类型”,而不是“年份”和“类型”。
你可以在这里看到一个模型:http: //snaprockandpop.samcampsall.co.uk/shoots/
附加到每个类别项目的 jQuery 用于对帖子进行排序,如下所示:
function (){
var selector = $(this).attr('data-filter');
$container_isotope.isotope({ filter: selector });
var $parent = $(this).parents(".filter_list");
$parent.find(".active").removeClass('active');
$(".filter_list").not($parent).find("li").removeClass('active').first().addClass("active");
$(this).parent().addClass("active");
return false;
}
我可以从 Isotope 网站看到可以使用多个过滤器,我在这里找到了作者的注释:http: //jsfiddle.net/desandro/pJ6W8/31/
编辑:编辑主题文件允许我为过滤器列表分配适当的类和属性(您可以在页面源代码中看到这些),并且我通过 jsfiddle 的编辑版本来定位它们以反映类和 id 在主题造型:
$( function() {
var $container = $('#portfolio_container');
$container.isotope({
animationOptions: { duration: 300, easing: 'linear', queue: false },
getSortData : {
year : function ( $elem ) { return parseFloat( $elem.find('._year').text() ); },
live-shows : function ( $elem ) { return parseFloat( $elem.find('._live-shows').text() ); }
}
});
var filters = {};
$('.ql_filter a').click(function(){
var $this = $(this);
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.filter_list');
$optionSet.find('.active').removeClass('active');
$this.addClass('active');
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
两件(相当重要的)事情:
1) 我不是 100% 正确地编辑了这个。尽管 Rich 发表了出色的评论,但我仍然无法理解。我特别不清楚如何设置“getSortData”部分 - 我认为这是正确的,但任何输入都会很棒。
2) 我不确定这个 JavaScript 是否正在启动。目前我已经将它放在结束 head 标签之前,但页面上的检查表明上面概述的原始脚本是在过滤器项目上运行的脚本。
在这个阶段的任何指示都会很棒!