How to create a filterable gallery with jQuery

Dec 9, 2013
jQuery
108 Shares
By

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.

Author: Sara Vieira
Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.
  • lucanos

    Or, rather than using HTML5 data attributes, why not just use classes? Then you can have gallery items associated with one or more filter terms.

    http://jsfiddle.net/lucanos/Phx5h/

    • Sara Vieira

      I thought about that and it’s also a good idea , in this case I used the data atribute because it was more of a teaching decision , this way I would show the jQuery part and also give some practical uses for the data attribute to the people who haven’t yet found them.

  • RSturim

    Nice summary Sara. One small note, it’s preferred to pass the event object on the click, and then use “preventDefault()” rather than “return false”. A good explanation of distinguishing the two can be found here http://css-tricks.com/return-false-and-prevent-default/

    • Sara Vieira

      Just read it and I will definitely be making the switch now, thank you for the advice and glad it didn’t cause any problems in this code.

  • Aidas

    Hi, I am fresh new in web development. I was looking for a filterable gallery and found yours. But I can not make it work. Does that small piece of jQuery code do all the work? Or I need something else?