Item with text only

Item with IMG + text

Item with text only

Item with text only

Item with IMG + text

Item with text only

Item with text only

Item with IMG + text

  1. General

    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.

  2. Creating content for filtering

    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:
     - empty,
     - image, 
     - text,
     - text-img

  3. Creating filtering menu

    Create menu for filtering content.
    In my case it will be buttons inside the div.
    Div container for buttons has a class: filtefing-menu and ID: filter. Buttons can be styled as you wish

  4. Adding data attributes for make filters work

    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.

  5. Connecting plugin

    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 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.

    <script src="your link" type="text/javascript"></script> 

    In my case I used public link
    https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js

    After this line of code you have to add a code, which will call jQuery plugin.

    <script> $(document).ready( function() { // init Isotope var $grid = $('.itembox').isotope({ itemSelector: '.item' }); // store filter for each group var filters = {}; $('.filter-menu').on( 'click', '.button', function() { var $this = $(this); // get group key var $buttonGroup = $this.parents('.button-group'); var filterGroup = $buttonGroup.attr('data-filter-group'); // set filter for group filters[ filterGroup ] = $this.attr('data-filter'); // combine filters var filterValue = concatValues( filters ); // set filter for Isotope $grid.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); }); // flatten object by concatting values function concatValues( obj ) { var value = ''; for ( var prop in obj ) { value += obj[ prop ]; } return value; } </script>

    Don't forget to change .itembox, .item, .filter-menu 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.

  6. Filtering "mixed" categories of element.

    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

  7. Publish you site and enjoy plugin!
    Good luck!