Gridzy.js 2 – Filters

Filters in Gridzy.js 2 are pretty simple but powerful. No matter what kind of filter do you need, it’s very likely that it’s realizable. All you need is, a bit CSS and a few HTML form elements …

Here is a functional example:

<div id="myFilterControls">
	<button value="*">All</button>
	<button value=".animals">Animals</button>
	<button value=".architecture">Architecture</button>
	<button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
	<img class="animals" src="https://placeimg.com/640/480/animals?1" alt="a random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?1" alt="a random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?1" alt="a random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?2" alt="another random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?2" alt="another random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?2" alt="another random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?3" alt="yet another random animal image" />
</div>

Let’s Build It Step by Step

1. First we need the usual HTML structure of Gridzy and set class names for all gallery items so we can filter them afterwards

<div class="gridzy">
	<img class="animals" src="https://placeimg.com/640/480/animals?1" alt="a random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?1" alt="a random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?1" alt="a random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?2" alt="another random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?2" alt="another random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?2" alt="another random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?3" alt="yet another random animal image" />
</div>

In this example we only use one class for each element. But you can also set multiple classes for a single element, if that element should be findable via multiple filters.

2. Then we add some buttons through which we can change the filters then

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
	<img class="animals" src="https://placeimg.com/640/480/animals?1" alt="a random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?1" alt="a random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?1" alt="a random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?2" alt="another random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?2" alt="another random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?2" alt="another random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?3" alt="yet another random animal image" />
</div>

Instead of the buttons, you could also use other form elements like checkboxes, radio buttons, select fields and so on.

As you can see, the values of the buttons are usual CSS selectors. As soon as we finished, a click on such a button will display the images that match that CSS selector. Technically it simply sets the filter option to this value.

You can also use much more complex selectors. For example :not(.animals) would work too, as well as .animals.people and .animals, .people.

3. Lastly, we encapsulate the buttons in a div container and bind them to the Gridzy gallery, by setting the filterControls option:

<div id="myFilterControls">
	<button value="*">All</button>
	<button value=".animals">Animals</button>
	<button value=".architecture">Architecture</button>
	<button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
	<img class="animals" src="https://placeimg.com/640/480/animals?1" alt="a random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?1" alt="a random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?1" alt="a random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?2" alt="another random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?2" alt="another random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?2" alt="another random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?3" alt="yet another random animal image" />
</div>

As you can see, we also use a CSS selector for the filterControls option. The div container with the id attribute only serves to make the buttons easier to select via that CSS selector.

That’s it! Was pretty simple, right?

If you prefer a JavaScript solution, check out the Gridzy.js 2 – API.

made by @eHtmlu