options

//Default options
options = {
   animationDuration: 0.5,
   callbacks: {
      onFilteringStart: function() { },
      onFilteringEnd: function() { },
      onShufflingStart: function() { },
      onShufflingEnd: function() { },
      onSortingStart: function() { },
      onSortingEnd: function() { }
   },
   controlsSelector: '',
   delay: 0,
   delayMode: 'progressive',
   easing: 'ease-out',
   filter: 'all',
   filterOutCss: {
      opacity: 0,
      transform: 'scale(0.5)'
   },
   filterInCss: {
      opacity: 0,
      transform: 'scale(1)'
   },
   layout: 'sameSize',
   multifilterLogicalOperator: 'or',
   selector: '.filtr-container',
   setupControls: true
}
                        

The properties of Filterizr's options object are:

• animationDuration (typeof: Number / Default: 0.5)

  The duration of CSS3 transitions, taking place for your effects.

• callbacks (typeof: Object)

  Used as the namespace for your callbacks.

  • onFilteringStart (typeof: Function / Default: Empty function)

    Called when you fire the filter method.

  • onFilteringEnd (typeof: Function / Default: Empty function)

    Called when the filtering animation is complete.

• controlsSelector (typeof: String / Default: '')

  In case there is the need to have more than one Filterizr instance on the same page then you need to set up different controls for them. This is where this option comes in handy. When instantiating your Filterizr you will need to set the following options:

  { controlsSelector: '.filtr-controls', setupControls: false }

  Then you will have to set the same class on all of your Filterizr controls, i.e. in this case .filtr-controls.
  The option setupControls: false will prevent the default controls from being set up and by defining the controlsSelector you target a specific set of controls for this Filterizr instance.

• delay (typeof: Number / Default: 0)

  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.

• delayMode (typeof: String / Default: 'progressive')

  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.

• easing (typeof: String / Default: 'ease-out')

  The easing algorithm used for CSS3 transitions. Look up the CSS3 transition-timing-function property for possible values.

• filter (typeof: String or Number / Default: 'all')

  The default value can be used for an unfiltered gallery. To initialize a filtered gallery, set this property to your category of choice before instantiating Filterizr.

• filterOutCss (typeof: Object / Default: { opacity: 0, transform: 'scale(0,0)' })

  An object with CSS properties, written the same way you would write it for jQuery's .css() function. This the transition that plays when your items are being filtered out.

• filterInCss (typeof: Object / Default: { opacity: 1, transform: 'scale(1,1)' })

  An object with CSS properties, written the same way you would write it for jQuery's .css() function. This the transition that plays when your items are being filtered in.

• layout (typeof: String / Default: 'sameSize')

  By default sets the layout for items with same width and height. Other possible values are: 'packed' for a layout of items of varying width and height, 'sameWidth' for a layout of items with the same width but varying height. 'sameHeight' for a layout of items with the same height but varying width. 'horizontal' for a layout of items laid out horizontally. 'vertical' for a layout of items laid out vertically. To see a demo of each and every layout, check the Tutorials section.

• multifilterLogicalOperator (typeof: String / Default: 'or')

  This option defines the logic in which multifiltering will be applied in case it's enabled. If set to 'or' then it will render all items that belong to one of the active categories e.g. 3 or 4. If set to 'and' then it will render all items that belong to both categories i.e. 3 and 4.

• selector (typeof: String / Default: '.filtr-container')

  The selector of the container used for your gallery.

• setupControls (typeof: Boolean / Default: true)

  If set to true then Filterizr will try to detect and set up filtering, shuffling and sorting controls. In case you have multiple Filterizrs in your view, you might decide to set this to false and set up your own controls, using the public API, so as to avoid interference the controls of your Filterizrs.

filter

.filterizr('filter', targetFilter)

Filter the container to hide/show and rearrange the elements on screen, while switching between categories.

• targetFilter (typeof: String or Number)

  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

.filterizr([options])

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.

• options (typeof: Object / Default: options)

  This optional parameter can be passed to set the Filterizr's options. For more information on defaults look into the options object documentation.

destroy

.filterizr('destroy')

Destroy your Filterizr instance. Resets all inline styles and unbinds all Filterizr related events.

search

.filterizr('insertItem', $node)

Insert a new item at the end of Filterizr's grid.

• $node (typeof: Object)

  A new .filtr-item element in the form of a jQuery node.

search

.filterizr('search', text)

Filter your .filtr-item based on whether the value of the string you define exists in their contents.

• text (typeof: String)

  The string for which to search in the contents of .filtr-item elements while filtering them.

Shuffle

.filterizr('shuffle')

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

sort

.filterizr('sort' [,attr] [,sortOrder])

Sort your elements based on a certain attribute in ascending or descending order and rearrange them on screen.

• attr (typeof: String / Default: 'domIndex')

  The attribute based on which the elements are sorted. If not provided it defaults to value 'domIndex' and the elements are sorted based on their initial position in the DOM. If its value is set to 'sortData', the elements are sorted based on the value of the user-defined data-sort attribute. Other possible values includes 'w' or 'h' if you wish to sort your elements by width or height (used for layouts of items of different size). Moreover, it is possible to sort by any custom data-attribute, see below for more information.

• sortOrder (typeof: String / Default: 'asc')

  Determines whether the elements will be sorted in ascending or descending order. Possible values are 'asc' and 'desc'.

setOptions

.filterizr('setOptions', options)

Overrides the default for customized options. Use to change the transition effects of the gallery.

• options (typeof: Object / Default: see options in the docs)

  An object overriding some or all of Filterizr's properties.

toggleFilter

.filterizr('toggleFilter', toggledFilter)

Filters the visible items based on a collection of filters toggled on. If all filters are toggled off then an unfiltered gallery is rendered.

• toggledFilter (typeof: Number)

  The number of the category whose corresponding filter is to be toggled on/off.

filteringStart

.on('filteringStart', callback)

This event is thrown in the filter method to indicate that filtering has started.

To intercept this event you can either override the onFilteringStart callback in the options object:

fltr.filterizr('setOptions', {
   callbacks: {
      onFilteringStart: function() {
         //your code here 
      }
   }
})

Or use jQuery:

filtrizr.on('filteringStart', function() {
   //Your code
})

filteringEnd

.on('filteringEnd', callback)

This event is thrown in the filter method to indicate that filtering has ended.

To intercept this event you can either override the onFilteringStart callback in the options object:

fltr.filterizr('setOptions', {
   callbacks: {
      onFilteringEnd: function() {
         //your code here 
      }
   }
})

Or use jQuery:

filtrizr.on('filteringEnd', function() {
   //Your code
})

shufflingStart

.on('shufflingStart', callback)

This event is thrown in the shuffle method to indicate that shuffling has begun.

To intercept this event you can either override the onShufflingStart callback in the options object:

fltr.filterizr('setOptions', {
   callbacks: {
      onShufflingStart: function() {
         //your code here 
      }
   }
})

Or use jQuery:

filtrizr.on('shufflingStart', function() {
   //Your code
})

shufflingEnd

.on('shufflingEnd', callback)

This event is thrown to indicate that shuffling has ended.

To intercept this event you can either override the onShufflingEnd callback in the options object:

fltr.filterizr('setOptions', {
   callbacks: {
      onShufflingEnd: function() {
         //your code here 
      }
   }
})

Or use jQuery:

filtrizr.on('shufflingEnd', function() {
   //Your code
})

sortingStart

.on('sortingStart', callback)

This event is thrown in the sort method to indicate that sorting has begun.

To intercept this event you can either override the onSortingStart callback in the options object:

fltr.filterizr('setOptions', {
   callbacks: {
      onSortingStart: function() {
         //your code here 
      }
   }
})

Or use jQuery:

filtrizr.on('sortingStart', function() {
   //Your code
})

sortingEnd

.on('sortingEnd', callback)

This event is thrown to indicate that sorting has ended.

To intercept this event you can either override the onSortingEnd callback in the options object:

fltr.filterizr('setOptions', {
   callbacks: {
      onSortingEnd: function() {
         //your code here 
      }
   }
})

Or use jQuery:

filtrizr.on('sortingEnd', function() {
   //Your code
})