jQuery Plugin For Impressive Galleries With CSS Effects - Filterizr

jQuery Plugin For Impressive Galleries With CSS Effects - Filterizr
File Size: 557 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Filterizr is a lightweight jQuery plugin for sorting, filtering and shuffling your responsive gallery with smooth CSS3 transition effects. Filterizr allows you to write your own CSS transitions that will bring your gallery to life. It is optimized for mobile performance and comes at the minute size of 8.5kb.

Basic usage:

1. First you need to load the jQuery Filterizr plugin after you've added jQuery library.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="js/filterizr.min.js"></script>

2. The markup structure to create a gallery like so:

<div class="filtr-container">
  <div class="filtr-item" data-category="1" data-sort="value">
    <img src="1.jpg" alt="sample">
  <div class="filtr-item" data-category="2, 1" data-sort="value">
    <img src="2.jpg" alt="sample">
  <div class="filtr-item" data-category="1, 3" data-sort="value">
    <img src="3.jpg" alt="sample">

3. Add sort/filter/shuffle controls to the webpage.


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


<!-- sort order select -->
<select data-sortOrder>
  <option value="domIndex"> Position </option>
  <option value="sortData"> Custom Data </option>

4. Initialize the plugin.

var filterizd = $('.filtr-container').filterizr({
   // options here

5. All default options.

// The duration of CSS3 transitions
animationDuration: 0.5,

// callbacks
callbacks: {
  // Called when you fire the filter method.
  onFilteringStart: function() { },
  // Called when the filtering animation is complete.
  onFilteringEnd  : function() { }

// 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',

// The selector of the container used for your gallery.
selector: (typeof selector === 'string') ? selector : '.filtr-container',

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

6. Public methods.

// 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)

// A jQuery extension method registered on jQuery.fn. 
// It can be used on all DOM elements serving as the gallery's container to initialize Filterizr. It returns the jQuery object to facilitate method-chaining.

// Use to shuffle the elements in random order and rearrange them on screen.

// Sort your elements based on the a certain attribute attribute in ascending or descending order and rearrange them on screen.
.filterizr('sort' [,attr] [,sortOrder])

// Set options
.filterizr('setOptions', options)

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

7. Events.

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

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

Change log:

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 scripts (e.g. Mootools) due to using for..in loops on Arrays.
  • Fixed a bug where .filteredOut items would be clickable by adding pointer-events: none on all filtered out items (for IE10 a .filteredOut { z-index: 1-; } rule is still needed in your CSS file).

v1.2.2 (2016-04-22)

  • Improved UX of setOptions method when overriding the callbacks object in options. All undefined callbacks will now be set to an empty function by default.
  • Fixed a bug in getCategory method of filtr items, where a string would be compared with a number, by using parseInt.
  • Fixed a bug in toggleFilter method where if the user would resize the window undefined would be added to the toggledOn filters and would cause an error to be thrown if the user switched off the categories.

v1.2.1 (2016-03-28)

  • Fixed a minor bug which would occur in the absence of a search input field
  • Added new API method .filterizr('search', text), which is used to apply a search filter.
  • Added new search control in the form of an input text which must have a data-search attribute.
  • Updated public API methods to account for and apply the search filter over their intended 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 activate filters and display specific portions of the gallery alone or in combination. When all filters are turned of an unfiltered gallery is shown. 
  • All filtered out .filtr-item elements now get a 'filteredOut' class when they are filtered out of the visible elements, so that the user can target them if needed. 
  • Improved error checking, when the value of the data-category attribute of .filtr-item elements is not an integer or a string of integers delimited by ', ' a comprehensive error is thrown.


  • Release 1.0.1 - improved sorting

About Author:

Author: Yiotis Kaltsikis

Website: http://yiotis.net/filterizr

This awesome jQuery plugin is developed by giotiskl. For more Advanced Usages, please check the demo page or visit the official website.