Adding filtering to jquery-isotope within Wordpress theme -

Adding filtering to jquery-isotope within Wordpress theme -

i'm using vitrux theme in wordpress uses isotope jquery plugin display work porfolio. isotope allows categories used sort items, within theme it's possible sort 1 category @ time (e.g. 'year' or 'type', not 'year' and 'type'.

you can see mock-up here: http://snaprockandpop.samcampsall.co.uk/shoots/

the jquery attached each category item, sorts posts, follows:

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"); homecoming false; }

i can see isotype site it's possible utilize multiple filters, , i've found authors notes on here: http://jsfiddle.net/desandro/pj6w8/31/

edit: editing theme files has allowed me assign appropriate classes , properties filter lists (you can see these in page source) , i'm targeting them through edited version of jsfiddle reflect classes , id's in theme styling:

$( function() { var $container = $('#portfolio_container'); $container.isotope({ animationoptions: { duration: 300, easing: 'linear', queue: false }, getsortdata : { year : function ( $elem ) { homecoming parsefloat( $elem.find('._year').text() ); }, live-shows : function ( $elem ) { homecoming 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 grouping = $optionset.attr('data-filter-group'); filters[ grouping ] = $this.attr('data-filter'); var isofilters = []; ( var prop in filters ) { isofilters.push( filters[ prop ] ) } var selector = isofilters.join(''); $container.isotope({ filter: selector }); homecoming false; }); });

two (fairly major) things:

1) i'm not 100% i've edited correctly. despite rich's first-class comments i'm still out of depth. i'm particularly not clear on how set-up 'getsortdata' section - think it's right input great.

2) i'm not sure javascript beingness initiated. @ moment i've placed before closing head tag check on page suggests original script outlined above 1 running on filter items.

any pointers @ stage fantastic!

i see mean. looking intersection of both filters , not mutually exclusive filter values.

short answer: contact theme vendor , see if can create intersection filters you.

longer assistance (not answer):

your ultimate goal vitrux theme working way want. first goal understand jsfiddle code doing. can handle first goal explicating code.

// hook jquery document load event , run anonymous function $( function() { // create variable called container // create container refer element id container var $container = $('#container'); // initialize isotope // phone call isotope method on container element $container.isotope({ // options... //distracting options animationoptions: { duration: 300, easing: 'linear', queue: false }, getsortdata : { cost : function ( $elem ) { homecoming parsefloat( $elem.find('.price').text() ); }, size : function ( $elem ) { homecoming parsefloat( $elem.find('.size').text() ); } } }); // sorting button //for anchor tag has class of 'pricelow', wire anonymous function click event $('a.pricelow').click(function(){ //rerun isotope method when clicked, pass array of options parameter $('#container').isotope({ sortby : 'price',sortascending : true }); //return false anonymous function. not 100% sure why necessary has bitten me before homecoming false; }); //removed rest of click methods, because same thing different params //here interested in understanding //create empty filters object var filters = {}; // filter buttons //when anchor tag class filters clicked, run our anonymous function $('.filters a').click(function(){ //create variable action anchor element var $this = $(this); // don't proceed if selected checking if class of "selected" has been applied anchor if ( $this.hasclass('selected') ) { return; } //create optionset variable, point anchor's parent's class of "option-set" var $optionset = $this.parents('.option-set'); // alter selected class //inside optionset, find elements match "selected" class , remove "selected class" $optionset.find('.selected').removeclass('selected'); // set (the anchor element) class "selected" $this.addclass('selected'); // store filter value in object // create variable called 'group' points optionsset variable , grab data-filter-group expando attribute var grouping = $optionset.attr('data-filter-group'); //append filters object @ top of section , set data-filter-group value anchor tag's data-filter value filters[ grouping ] = $this.attr('data-filter'); //create isofilters array variable var isofilters = []; //loop through each 1 of items in filters (give item alias variable called 'prop' ( var prop in filters ) { //push prop isofilters array (the opposite pop) isofilters.push( filters[ prop ] ) //keep looping until there no more items in object } //create variable called selector , turn array string joining of arrays var selector = isofilters.join(''); //like always, phone call 'isotope' method of 'container' element , pass our newly concatenated 'selector' string 'filter' option. $container.isotope({ filter: selector }); //return false reason (maybe can expand on that) homecoming false; }); });

next ultimate goal modifying vitrux theme handle intersection filters.

this gets little tricky because

you have automatically generated tags php create category links , year filter. so, there php code changes. you must convert jsfiddle code handle php changes

wordpress filtering jquery-isotope