Need help with filterizr?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

giotiskl
550 Stars 209 Forks MIT License 484 Commits 28 Opened issues

Description

:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:

Services available

!
?

Need anything else?

Contributors list

# 57,150
TypeScr...
shuffle
image-g...
HTML
461 commits
# 53,994
HTML
Twitch
Swift
pushbul...
1 commit
# 1,452
image-f...
assembl...
netfram...
residua...
1 commit

Filterizr logo
Build Status NPM version NPM monthly downloads license badge

Description

Filterizr is a JavaScript library that sorts, shuffles, searches and applies stunning filters over responsive galleries using CSS3 transitions. Write your very own, custom effects in CSS and watch your gallery come to life!

It can also be used as a jQuery plugin.

Install

You can install Filterizr by downloading the minified version on its website/repo or through npm/yarn:

npm install filterizr

or

yarn add filterizr

Three files can be found in the

./dist/
directory:
  • filterizr.min.js
    is the pure Filterizr JavaScript library that can be used using CommonJS (or ES6) imports, it is the main entry point when installing via npm.
  • vanilla.filterizr.min.js
    is a distribution of Filterizr which can be used directly in a
     tag, as it exposes the Filterizr library as a global.
  • jquery.filterizr.min.js
    is a distribution of Filterizr as a jQuery plugin. It detects and extends the global jQuery object and also exposes the vanilla Filterizr library as a global.

Documentation & Tutorials

Basic usage

If you are building a simple static website and would like to use Filterizr via

 tag make sure to download 
/dist/vanilla.filterizr.min.js
and load it.

If you would like to use the jQuery variation then include

/dist/jquery.filterizr.min.js
in a
 tag. Make sure to import it after jQuery itself.

If you are importing Filterizr from

/node_modules
, Filterizr's default export provide you with the vanilla JavaScript library:
import Filterizr from 'filterizr'

If you are using jQuery in that same project, also installed via npm and you would like to use Filterizr as a jQuery plugin then you can call the static method

Filterizr.installAsJQueryPlugin
, passing in the jQuery object as follows:
import $ from 'jquery';
import Filterizr from 'filterizr';

// This will extend the $.fn prototype with Filterizr Filterizr.installAsJQueryPlugin($);

$('.filter-container').filterizr('filter', 5); // or any other Filterizr API call

Tutorials & Docs

You can find Filterizr's documentation as well as a series of tutorials on how to install and operate Filterizr on the Filterizr website. Here is a list of contents:

Contents:

Why Filterizr?

  • Thoroughly documented and easy to use.
  • Performs great on mobile.
  • Written in TypeScript.
  • Has zero dependencies.

Contributing

If you would like to contribute to Filterizr, please make sure to follow the steps described:

  • Create a fork from
    master
    branch
  • Add your feature or bug fix
  • If you're implementing a method, add tests
  • Run the tests and ESLint to make sure everything is ok
  • Make your PR and set the base branch to
    develop

Browser support

IE11 and all modern browsers.

Donate

Did you enjoy Filterizr? Filterizr is and will always be 100% free, if you would like to show your support feel free to donate:

  • BTC: 1JdpKt3aeNQuKF9CrUKeq3XkPswcqgAFpt
  • ETH: 0xdb259cf059faf286e5834e95c8f3a973438276e8
  • Paypal: https://www.paypal.me/yiotiskl

License

Filterizr is licensed under the MIT License. Enjoy!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.