Catálogo

Nuestros Modelos

Filtering Tutorial

Filterizr offers two distinct options when it comes to the aesthetics of filtering items. All you have to do is use the appropriate preset Filterizr control for each one of the options and Filterizr will handle the rest for you. In the section below you can find examples of both modes, what they look like as well as how to set them up.

Active Filter Mode

Control setup

Description

For this filtering mode all you need to do is to include the data-filter attribute in your controls as depicted above. Each time you switch between filters by clicking a button, items of the corresponding data-category will be shown. This mode uses the .filterizr('filter', targetFilter) method in the background to switch between categories.

All

Green

Orange

Purple

Mix

1

2

3

4

5

6

7

8

9

10

11

12

Toggle Filter Mode

Control setup

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.

All

Green

Orange

Purple

1

2

3

4

5

6

7

8

9

10

11

12

Sorting Tutorial

Filterizr offers both some preset options for sorting and enables you sort your items with your own data, using data-attributes.

Asc

Desc

1-C-X

2-R-B

3-A-D

4-F-J

5-N-Y

6-M-Q

7-S-I

8-O-P

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:

<selectdata-sortOrder><optionvalue="domIndex"> Position in DOM </option><optionvalue="sortData"> data-sort Attribute </option><!-- Next two can be used for layouts of varying widths/heights --><optionvalue="w"> Item Width </option><optionvalue="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:

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:

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

<selectdata-sortOrder><optionvalue="domIndex"> Position in DOM </option><!-- Other options and then... --><optionvalue="author"> Author Name </option><optionvalue="year"> Year Published </option><optionvalue="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:

Delay Modes Tutorial

If you would like to spice up the effect of your Filterizr by making it less synchronous, you could experiment with adding delays between
your gallery's items. Filterizr uses by default delayMode:'progressive' but the value of delay in the options is set to 0. Thus, there is no delay effect by default.

Progressive delay mode

fltr.filterizr('setOptions',{ delay:50, delayMode:'progressive'});

This delay mode increases the transition-delay property of your items consecutively by the amount you've set the delay option in Filterizr's options. I would suggest a value between 25-50 ms for an optimal effect.

All

Odd

Even

1

2

3

4

5

6

7

8

9

10

11

12

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.

All

Odd

Even

1

2

3

4

5

6

7

8

9

10

11

12

Layouts Tutorial

Same size layout

fltr.filterizr('setOptions',{layout:'sameSize'});

This layout should be used with items having the same width and height.

All

Odd

Even

1

2

3

4

5

6

7

8

9

10

11

12

Packed layout

fltr.filterizr('setOptions',{layout:'packed'});

This layout can be used with items of any size and it will make smart decisions about where to place them.
It makes use of Jake Gordon's Bin Packing algorithm
to place the items in the container.

All

Odd

Even

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Same height layout

fltr.filterizr('setOptions',{layout:'sameHeight'});

This layout should be used with items having the same height and a varying width.

All

Odd

Even

1

2

3

4

5

6

7

8

9

10

11

12

Same width layout

fltr.filterizr('setOptions',{layout:'sameWidth'});

This layout should be used with items having the same width and a varying height.