go to https://isotope.metafizzy.co/ website and add isotope js file in your html file.
write markup for isotope
<div class="grid">
<div class="grid-item flower">...</div>
<div class="grid-item fruit">...</div>
<div class="grid-item bard">...</div>
</div>
initialize isotope plugin with jquery. [dependancy jquery]
$grid = $('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
write markup for filtering
<div class="filter">
<h1>Filtering</h1>
<button data-name='*' class="btn btn-info">All</button>
<button data-name=".fruit" class="btn btn-primary">fruit</button>
<button data-name=".flower" class="btn btn-danger">flower</button>
<button data-name=".bird" class="btn btn-success">bird</button>
</div>
make a onclick handler for click event. and get the selected button value and filter using isotope function
$('.filter button').on("click", function () {
var value = $(this).attr('data-name');
$grid.isotope({
filter: value
});
})
First write markup for sorting
<div class="sort">
<h1>sorting</h1>
<button data-name='name' class="btn btn-primary">name</button>
<button data-name='original-order' class="btn btn-info">original</button>
<button data-name='random' class="btn btn-dark">random</button>
</div>
Earlier in initialization, we use only itemSelector
and layoutMode
attribute. In order to set user defined sorting add getSortData
and give a attribute key with value. In our case attribute name is name
and value is text of .grid-item
.
getSortData: {
name: function (element) {
return $(element).text();
}
}
Now listen for the sorting button click and call isotope function with specifying sortBy
. Here name
only our defined attribute. It has 2 built in attribute. random
and original-order
. Js code is following
$('.sort button').on("click", function () {
var value = $(this).attr('data-name');
$grid.isotope({
sortBy: value
});
})
I add bootstrap active class to button for indicating which filter and sort currently active. Initially, in case of filter, all
is active and in case of sort original-order
is active.
<button data-name='*' class="btn btn-info active">All</button>
Whenever some one click on any filter or sort button, I will remove active class from all button and add active class only to selected button. js code is following
//incase of filter
$('.filter button').removeClass('active');
$(this).addClass('active');
//incase of sorting
$('.sort button').removeClass('active');
$(this).addClass('active');
Hope this will help you. Take care. Thanks for watching and reading.