Developed by Jamie Keomanivong
sFilter is a jQuery application that allows you to show/hide elements based on labels that you create. It utilizes HTML data attributes and requires no javascript knowledge whatsoever.
Unfortunately sfilter currently supports only one gallery per page.
First and foremost you'll need to download sFilter-1.3.min.js, unpack it and load both jQuery and sFilter into your document.
Using sFilter is very simple. You only need to know the following data attributes and the default CSS. Most can also be used with any tag types that you'd like.
You can check out the demo here!The data-sf-label and data-sf-group attributes are required. This is because sFilter uses the labels as targets. Any time an sFilter label is clicked, any elements that have sFilter groups containing the clicked label will be hidden. Both attributes can be used with any tag.
This attribute can only hold one label value. sFilter will find any elements with this attribute and bind a click event allowing it to show/hide your items.
<span data-sf-label="blue">Blue</span> <button data-sf-label="red">Red</button>
This attribute can hold any number/combination of label values. Once you deactivate a label, any element that has that label in its group will be hidden.
<span data-sf-group="blue square">Blue</span> <p data-sf-group="red square">Red</p> <div data-sf-group="red triangle">Triangle</div>
The following attributes can be used to enhance the sFilter experience. Please be sure to read each description carefully before use. Some attributes may require special instructions.
This attribute is only used if you need a button to show every element all at once, and can only be used one time. Can be used with any tag.
<span data-sf-show-all>Show All</span>
This attribute is only used if you need a button to hide every element all at once, and can only be used one time. Can be used with any tag.
<p data-sf-hide-all>Hide All</p>
This attribute is only used if you would like some sort of message to show when all elements are hidden. Can be used with any tag.
<img data-sf-error src="/image" />
This attribute can be used to select a transition when showing/hiding elements. There are currently only two options. Simply not using this attribute will default to "none" and elements will quickly hide/show. Setting it to "fade", as shown below, will cause the elements to fade in/out. Can only be used in the <body> tag
<body data-sf-transition="fade">
This attribute can be used to set the duration of any transition in millaseconds. It defaults to 500 if not used and has no affect either way when no transition is in effect. Can only be used in the <body> tag.
<body data-sf-transition="fade" data-sf-transition-duration="1000">
This attribute is used to label the first and last items in the set of elements. For example, if there is an image gallery that is 4 columns wide, this will add the class "first-item" to the first element of each row and "last-item" to the last element of each row.
The structure is [screen width]-[number of columns]. Entering multiple combinations separated by a space will allow sFilter to adjust the first-item and last-item classes on elements as they're filtered or when the screen is resized. sFilter would read the following example as "For 360px and smaller we're using a 3 column layout. For 1024px and smaller we're using a 5 column layout. And so on."
It's best practice to put the data-sf-cols attribute on an element wrapping your gallery.
<div data-sf-cols="1024-5 360-3 992-4">
The required CSS is pretty simple. The following three selectors are all that you need to get started. Everything else can be styled using your own classes, IDs, etc.
[data-sf-error] {display:none;} /* Message that shows when nothing is visible */
.sf-off {display:none !important;} /* Class applied to element that is hidden */
.sf-not-active {color:#ddd;}/* class applied to label that is deactivated */