Toggle Filter Mode

Control setup

<ul>
   <li data-multifilter="all"> All </li>
   <li data-multifilter="1"> Green </li>
   <li data-multifilter="2"> Orange </li>
   <li data-multifilter="3"> Purple </li>
</ul>
            

Description

For this filtering mode you need to include the data-multifilter attribute in your controls. Each time you toggle a button, items of the corresponding data-category will be shown or hidden. When all buttons are switched off an unfiltered gallery is shown. This mode uses the .filterizr('toggleFilter', toggledFilter) method in the background to display or hide categories.

Basic Sorting

Filterizr has some preset options for sorting. In the Install tutorial, in the preset sorting controls a select input element is used to determine the value by which Filterizr's elements are order. The full built-in options are would be as follows:

<select data-sortOrder>
   <option value="domIndex"> Position in DOM </option>
   <option value="sortData"> data-sort Attribute </option>
   <!-- Next two can be used for layouts of varying widths/heights -->
   <option value="w"> Item Width </option>
   <option value="h"> Item Height </option>
</select>
                

Then you can either use Filterizr's preset controls to sort your elements by that value, or call the corresponding public method like this:

//Example 1: sort by item width, descending.
fltr.filterizr('sort', 'w', 'desc');
//Example 2: sort by the value of data-sort attribute, ascending.
fltr.filterizr('sort', 'sortData', 'asc');
                

Advanced Sorting

In case you want to have a variety of values by which to sort your elements, Filterizr allows you to add data-attributes with custom names and values to your items and use them for sorting. For example you could have items looking like this:

<div class="filtr-container">
    <div class="filtr-item" data-category="1" data-author="John Doe" data-year="1998" data-novel="Cool book 1">
       <img src="img/sample.jpg" alt="sample">
    </div>
    <div class="filtr-item" data-category="1" data-author="Jane Doe" data-year="2003" data-novel="Cooler book">
       <img src="img/sample.jpg" alt="sample">
    </div>
    <div class="filtr-item" data-category="1" data-author="Jake Doe" data-year="2008" data-novel="Coolest book">
       <img src="img/sample.jpg" alt="sample">
    </div>
</div>
                

Then all you have to do is add those private data-attribute names to your select input element:

<select data-sortOrder>
   <option value="domIndex"> Position in DOM </option>
   <!-- Other options and then... -->
   <option value="author"> Author Name </option>
   <option value="year"> Year Published </option>
   <option value="novel"> Book Title </option>
</select>
                

Once again, your sorting controls will take care of the rest. If you wish to use the public API once again you simply pass the value of the option elements as the attr parameter. Just remember to omit the data- part. For example:

//Example 1: sort by author name, descending.
fltr.filterizr('sort', 'author', 'desc');
//Example 2: sort by book title, ascending.
fltr.filterizr('sort', 'novel', 'asc');
                

Alternate delay mode

fltr.filterizr('setOptions', { delay: 350, delayMode: 'alternate' });

This delay mode sets the transition-delay property of every other item to the amount you've set the delay option in Filterizr's options. I would suggest a value between 250-400 ms for an optimal effect if you choose this delay mode.