Isotope is a jQuery plugin, which works on a container element with a group of similar child items. Can be used for filtering "separated" and "mixed" categories of elements. There is many more advanced settings which you can find on the official site.
Create container with similar child elements. In this case it will be divs. Later inside that divs you can put anything.
Style container and child elements by giving them classes.
In my case container - it is a div with class: itembox and ID: box. Child elements - divs with class: item
Add content to the items, style them like you wish and decide what categories will be for filtering. Create global classes for that categories. You can do this by adding simple div to the page and give it class In this case I created classes:
Create menu for filtering content.
In my case it will be buttons inside the div.
Div container for buttons has a class: filter-menu and ID: filter.
Buttons can be styled as you wish, but they suppose to have same class name, which you will use in code snippet. I used class .button
To every filtering button add custom data attribute
To every filtering button add custom data attribute data-filter which will be equal class of the elements, which this button will show:
data-filter="*" for Show all
data-filter=".empty" for Empty item
data-filter=".image" for IMG
data-filter=".text" for Text
data-filter=".text-img" for IMG+Text
With this settings you will be able to filter "separated" categories of elements: only one category for every button.
Filtering "mixed" categories at the end of setup section.
For connect this plugin you will have to add custom code to the site settings (pic1) or page settings (pic2) before tag.
First you will need a link to .js file of plugin.
You can download that file from the official site and save it to your hosting (or dropbox, or google-drive) 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 .itembox, .item, .filter-menu, .button if your will use another class names.
Also, instead of class name, for container you can use its ID (#box). Pretty useful if your site has several containers with same class.
To one item (element, that will be filtering) you can add few classes. It will let you create "mixed" filtering.
Create GENERAL CLASSES for that "mixed" categories. In this case I created classes:
- .img-and-text (for items with images and items with text),
- .empty-and-text (for empty items and items with text),
-.empty-and-image (for empty items and items with images).
Then add more buttons to the .filtering-menu
and add custom data attribute data-filter to every button:
data-filter=".img-and-text">IMG and Text
data-filter=".empty-and-text">Empty and Text
data-filter=".empty-and-img">Empty and IMG