New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sort by selected dynamic category #901
Comments
I'm sorry to see you're having trouble with Isotope. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines. |
Hi, thank you for your answer. My test case doesn't work well unfortunately: http://codepen.io/anon/pen/EjxWmB |
Thanks for that. Here's my solution: http://codepen.io/desandro/pen/zGZywM var selectedCategory;
var $grid = $('.grid').isotope({
getSortData: {
// sort items with selected category first
selectedCategory: function( itemElem ) {
return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
}
}
});
var $items = $('.grid').find('.grid-item');
$('.sort-button-group').on( 'click', '.button', function() {
// set selectedCategory
selectedCategory = $( this ).attr('data-category');
if ( selectedCategory == 'all' ) {
$grid.isotope({
sortBy: 'original-order'
});
return;
}
// update sort data now that selectedCategory has changed
$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'selectedCategory' });
}); Given your scenario, my solution is to use sorting so that the selected category gets sorted to the top. Instead of using multiple As for fading out un-selected items, that can be done with jQuery, rather than using funny stuff with Isotope. // change opacity for selected/unselected items
var selectedClass = '.' + selectedCategory;
$items.filter( selectedClass ).css({
opacity: 1
});
$items.not( selectedClass ).css({
opacity: 0.25
}); |
Hi,
firstly I would like to thank you for your work. Isotope is awesome!
Then I hope you'll be able to help me. I'm currently trying to build a sort-able portfolio using Isotope and hit a brickwall because of 2 matters:
I'd rather need a getSortData function which is dynamic, but don't have any idea of how to write it... e.g.
Can figure how to do it as well... e.g.
Thank you very much for your help!
The text was updated successfully, but these errors were encountered: