How to create a filterable gallery with jQuery

We see filterable galleries in plenty of portfolios, they’re a nice and tidy way of showing off different categories of work without forcing the user to review everything.

We’re going to build a filterable gallery using the data attribute that came with HTML5, this way we don’t have to tie everything up with classes.

If you want a better idea of what we will be creating, here’s a demo.

The data attribute 

I mentioned in the introduction that in this tutorial we will be using the data attribute, when you first look at the data attributes they don’t look like much but they actually come in handy for many things.

They basically work in a way that any attribute we set for our element that starts with data- will be treated as private data because it doesn’t affect the layout and the user can’t see it, after the data- we can put any word we want to make it easier for us to look at our code and understand what is going on. For example:

<a href="http://facebook.com" data-social="facebook">Check out my Facebook </a>
<a href="http://twitter.com" data-social="twitter">Check out my Twitter</a>

This attribute can later be called with CSS in order to perform some styling:

a [data-social="facebook"] {
 /* Styles */
}

They can even be called by JavaScript when a user performs a certain action with them (in our case when they click on them). They are very good for limiting the use of classes for JavaScript purposes (assuming you have more than one element on the page that will have the same data attribute and you can’t use ID’s).

Now that we have this covered let’s move on to the actual gallery.

The HTML

As always we have to start with the HTML for our little gallery, this HTML will just be an unordered list with all the links we want at the top — these links will be for the user to filter the portfolio — and then we will have the gallery itself which will also be inside an unordered list:

<ul id="tags">
	<li><a href="#" data-tag="all">All</a></li>
	<li><a href="#" data-tag="web">Web</a></li>
	<li><a href="#" data-tag="appdesign">App Design</a></li>
	<li><a href="#" data-tag="logo">Logos</a></li>
</ul>

<ul id="gallery">
<li data-tag="appdesign">
	<a href="http://dribbble.com/shots/543645-UX-iOS-UI-iPhone-idea-with-video-process" target="_blank">
		<img src="ux_idea.jpg" alt="App Design"/>
	</a>
</li>
<li data-tag="web">
	<a href="http://dribbble.com/shots/890759-Ui-Kit-Metro" target="_blank">
		<img src="metro_1x.jpg" alt="Web Design"/>
	</a>
</li>
<li data-tag="logo">
	<a href="http://dribbble.com/shots/561492-Checklist" target="_blank">
		<img src="checklist300x400.png" alt="Logo Design"/>
	</a>
</li>
<li data-tag="appdesign">
	<a href="http://dribbble.com/shots/606745-In-app-Visual-Data" target="_blank">
		<img src="infographic-dribbble.png" alt="App Design"/>
	</a>
</li>
<li data-tag="web">
	<a href="http://dribbble.com/shots/831162-Portrait-Gallery" target="_blank">
		<img src="portrait_gallery.jpg" alt="Web Design"/>
	</a>
</li>
<li data-tag="appdesign">
	<a href="http://dribbble.com/shots/701486-clyp-iPhone-Sidebar" target="_blank">
		<img src="iphone_sidebar_perspective.jpg" alt="App Design"/>
	</a>
</li>
</ul>

As you can see both the links at the top and the list items in the gallery’s unordered list have a data-tag attribute, this will help in matching the link we click to the list item itself, fading that one in while the other images are removed. We also added the data-tag of all to the first link at the top so that we can later fade in all the images when the user clicks this button, this will also be what will happen by default.

The jQuery

With this little chunk of HTML you can start to see what we will being doing; we’ll detect a click on the links, then compare the data- attribute from the link to the one for images:

$('#tags li a'). click(function() {
   var tag = $(this).attr('data-tag');

   if(tag === 'all') {
	$('#gallery li').fadeIn();
   } else {
	$('#gallery li[data-tag!='+tag+']').hide('200');
	$('#gallery li[data-tag='+tag+']').fadeIn();
   }

This code first checks if the selected tag is ‘all’, in which case every instance of the list images needs to fadeIn. Otherwise any image with a data attribute that does not equate (!=) to the clicked tag’s data attribute will hide, and any image whose data attribute does match the clicked link will fade in.

The last thing we need to do is add the standard line of code when working with links for JavaScript; we just need to return false to avoid some glitches:

   return false;
});

Conclusion

This idea of a filterable gallery has been used for a long time in web design, mainly in portfolios, but it’s also been something that we would probably use a plugin to create.

The data attribute, when combined with really simple jQuery can create some great effects, bypassing both classes and extensive use of jQuery’s data function.