MixItUp is a jQuery plugin providing animated filtering and sorting.
Great for managing any categorised or ordered content like portfolios, galleries and blogs.
MixItUp can also function as a powerful tool for engaging application UI and data-visualisation.
All information you can find an the official site
Since "mixed" filtering with this plugin works much more complicated than with Isotope plugin,
here is only instruction for setup simple filtering "separated" categories of elements.
Creating content for filtering
MixItUp filters and sorts content inside a container.
Your container should have a unique ID that MixItUp will use to reference it.
By default MixItUp will look for elements to filter and sort within your container with the class ’.mix’
So I have div with ID #container which has elements inside: divs with class .mix
For MixItUp to be able to filter the elements correctly, each one should be given specific class.
Create Global classes for that categories:
You can change category names as you wish. More changes can be added by advanced configuration settings.
Add content to the elements, decide what category they will belong and style them like you wish.
Creating filtering menu
Filtering happens when filter buttons are clicked.
By default MixItUp will apply filtering click handlers to any clickable element with the class ’.filter’
(this can be changed via configuration settings)
So you can have any container with links or buttons. In my case it is div with buttons, which has class .filter.
Adding data attributes for make filters work
Each filter button requires the attribute data-filter containing a class of the elements you wish to show.
Add custom data attribute:
In my case I have this data attributes:
data-filter="all" for Show all
data-filter=".category-1" for Empty item
data-filter=".category-2" for IMG
data-filter=".category-3" for Text
data-filter=".category-4" for IMG+Text
For connect this plugin you will have to add custom code to the site settings (pic1) or page settings (pic2) before </body> tag.
First you will need a link to .js file of plugin.
You can either host MixItUp yourself (hosting server or dropbox or google-drive)
or load it by using public CDN link or get public link to plugin file.
In my case I used public link
After this line of code you have to add a code, which will call jQuery plugin.
Don't forget to change #container if your will use another ID.
Last important detail.
Before we get to the finish, there is one small but crucial CSS rule you must add to the project:
filtering elements should have setting display:none
You can add this value to class .mix by initial appearance through interactions or just by using settings panel.
When MixItUp plugin will load, it will add the display value as an inline-style (the default is “inline-block”).
Publish you site and enjoy plugin!