Filterizr is a lightweight jQuery module for arranging, separating and rearranging your responsive display with smooth CSS3 change impacts. Filterizr enables you to compose your own CSS advances that will breath life into your exhibition. It is advanced for Fundamental use: 1. To start with you have to stack the jQuery Filterizr module after you've included jQuery library
javascript
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="js/filterizr.min.js"></script>

2. The markup structure to make a display like so:
html
<div class="filtr-container">
<div class="filtr-item" data-category="1" data-sort="value">
<img src="1.jpg" alt="sample">
</div>
<div class="filtr-item" data-category="2, 1" data-sort="value">
<img src="2.jpg" alt="sample">
</div>
<div class="filtr-item" data-category="1, 3" data-sort="value">

3. Include sort/channel/rearrange controls to the site page.
HTML
<ul> <!-- Filtering controls -->
<li data-fltr="all"> All items </li>
<li data-fltr="1"> Category 1 </li>
<li data-fltr="2"> Category 2 </li>
<li data-fltr="3"> Category 3 </li>
<!-- Shuffle controls -->
<li data-shuffle> Shuffle items </li>
<!-- For sorting controls add -->
<li data-sortAsc> Ascending </li>
<li data-sortDesc> Descending </li>
</ul>
<!-- sort order select -->
<select data-sortOrder>
<option value="domIndex"> Position </option>
<option value="sortData"> Custom Data </option>
</select>

4. Instate the module.
HTML
var filterizd = $('.filtr-container').filterizr({    // options here });

5. All default choices.
JavaScript
// The duration of CSS3 transitions
animationDuration: 0.5,

// callbacks
callbacks: {
onFilteringStart: () => { },
onFilteringEnd: () => { },
onShufflingStart: () => { },
onShufflingEnd: () => { },
onSortingStart: () => { },
onSortingEnd: () => { },
},

// The selector of the controls
controlsSelector: '',

// Measured in milliseconds and used to set the value of the transition-delay property of every item.
// The value of the transition-delay is incremented progressively by the value of delay for every item to create a more progressive version of your effect.
delay: 0,

// Determines how delay is applied to the transition between items.
// The two possible values are 'progressive' and 'alternate'.
// The value of delayMode makes no difference if delay is 0.
delayMode: 'progressive',

// The easing algorithm used for CSS3 transitions.
easing: 'ease-out',

// The default value can be used for an unfiltered gallery.
filter: 'all',

// An object with CSS properties
filterOutCss: {
'opacity': 0,
'transform': 'scale(0.5)'
},

// An object with CSS properties
filterInCss: {
'opacity': 1,
'transform': 'scale(1)'
},

// 'sameSize', 'horizontal' or 'vertical'
layout: 'sameSize',

// Defines the logic in which multifiltering will be applied in case it's enabled.
multifilterLogicalOperator: 'or',

// If set to true then Filterizr will try to detect and set up filtering, shuffling and sorting controls.
setupControls: true

6. Open techniques.
JavaScript
// Filter the container to hide/show and rearrange the elements on screen, while switching between categories.
// The target filter towards which to filter the visible category, should be a numerical value based on the data-category attribute of .filtr-item elements. The value 'all' can be used for an unfiltered gallery.
.filterizr('filter', targetFilter)

// Filter items
.filterizr('filter', 'all');

// Sort items
.filterizr('sort', 'domIndex', 'asc');

// Shuffle items
.filterizr('shuffle');

// Override options
.filterizr('setOptions', { /* Options */ });

// Destroy the plugin
.filterizr('destroy');

// Insert a new item
.filterizr('insertItem', $node);

// Filter the visible items based on a collection of filters toggled on.
.filterizr('toggleFilter', toggledFilter)

// Filter your .filtr-item based on whether the value of the string you define exists in their contents.
.filterizr('search', text)

// Occasions.
// This event is thrown in the filter method to indicate that filtering has started.
.on('filteringStart', callback)

// This event is thrown in the filter method to indicate that filtering has ended.
.on('filteringEnd', callback)

// This event is thrown in the shuffle method to indicate that shuffling has begun.
.on('shufflingStart', callback)

// This event is thrown to indicate that shuffling has ended.
.on('shufflingEnd', callback)

// This event is thrown in the sort method to indicate that sorting has begun.
.on('sortingStart', callback)

// This event is thrown to indicate that sorting has ended.
.on('sortingEnd', callback)

Change log: v1.3.1 (2018-01-24)
  • Fix bug where Filterizr would not be instantiated if the .filtr-holder had more than one class name.

v1.3.0 (2018-01-21)
  • Gave a core rewrite to the module, with ES6 and Babel, keeping up a regressive perfect API.
  • Added tests for most vital techniques.
  • Dropped support for Bower.
  • Added new API method .filterizr('insertItem', $node), which is used to add a new item into the Filterizr network.
  • Added new API method .filterizr('destroy'), which is used to destroy the Filterizr instance.
  • Added new option multifilterLogicalOperator: ('or'|'and') to support different multifiltering modes.
  • Added new option controlsSelector: '' allowing easy targeting of multiple controls if multiple Filterizr instances exist.
  • Filtered out items will now get a z-index of -1000 over the .filteredOut class making them non-interactive when not visible.

  • v1.2.5 (2016-05-22)
    • Fixed the bug caused by selector property which was removed in jQuery version 3.
    • Removed selector from configuration options.
  • v1.2.3 (2016-05-22)
    • Added Bower support.
    • Fixed a bug which made Filterizr incompatible with some other libraries (e.g., Mootools) due to using for..in loops on Arrays.
    • Fixed a bug where .filteredOut items would be interactive by adding pointer-events: none to all filtered out items (for IE10, a .filteredOut { z-index: -1; } rule is still required in your CSS file).
  • v1.2.2 (2016-04-22)
    • Improved UX of setOptions method by removing the callbacks object from options. All undefined callbacks will now be set to a no-op function by default.
    • Fixed a bug in getCategory method for filtr items, where a string was compared to a number, by using parseInt.
    • Fixed a bug in toggleFilter method where if the user resized the window, undefined would be added to the toggledOn filters and cause an error if the user switched classes.
  • v1.2.1 (2016-03-28)
    • Fixed a minor bug which occurred without a search input field.
    • Added new API method .filterizr('search', text), which is used to apply a search filter.
    • Added new search control as an input field which must have a data-search attribute.
    • Updated public API methods to handle and apply the search filter over their respective operations.
  • v1.1 (2016-03-23)
    • Added new API method .filterizr('toggleFilter', toggledFilter), which is used for the new multi-filtering mode.
    • Added new filtering mode and filtering controls for multi-filtering. The user can now enable filters and display specific parts of the gallery alone or in combination. When all filters are turned off, an unfiltered gallery is shown.
    • All filtered .filtr-item elements now get a 'filteredOut' class when they are filtered out of the visible items, allowing the user to target them if needed.
    • Improved error checking when the value of the data-category attribute of .filtr-item elements is not a number or a series of numbers delimited by commas. A thorough error is thrown.
  • 2016-03-01
    • Release 1.0.1 - enhanced sorting.

File Size: 607 KB

Official Website: Go to website

License: MIT

About Author:

Creator: Yiotis Kaltsikis

Site: http://yiotis.net/filterizr

This marvelous jQuery module is produced by giotiskl. For further developed Usages, please check the demo page or visit the official site.