I found a very interesting and useful tutorial for creating Filterable Portfolio using jQuery. (you can read the full tutorial here)

The only disadvantage of this script is that you cannot create external links to your portfolio categories. After several hours of code manipulation, I finally found a solution. It’s based on the tutorial’s code so what you need to do is just replace some parts of the code.

Here’s the solution:

1) Replace the framework.js code with the following:

$(document).ready(function() {

	// LOAD THE URL SPECIFIED CATEGORY ON PAGE LOAD
	var filterVal = unescape(self.document.location.hash.substring(1));
	if(!filterVal){
		filterVal = 'all';
	}
	if(filterVal == 'all') {
		$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
	} else {
		$('ul#portfolio li').each(function() {
			if(!$(this).hasClass(filterVal)) {
				$(this).fadeOut('normal').addClass('hidden');
			} else {
				$(this).fadeIn('slow').removeClass('hidden');
			}
		});
	}
	$('ul#filter .current').removeClass('current');
	$("#" + filterVal).parent().addClass('current');
	$("#" + filterVal).css('outline','none');

	//CLICK EVENT
	$('ul#filter a').click(function() {

		var filterVal = $(this).attr('id');

		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');

		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
	});

});

2) In index.htm file, replace the “<ul id=”filter”>…</ul>” list code, with the following:

</pre>
<ul id="filter">
	<li class="current"><a id="all" href="#all">All</a></li>
	<li><a id="design" href="#design">Design</a></li>
	<li><a id="development" href="#development">Development</a></li>
	<li><a id="cms" href="#cms">CMS</a></li>
	<li><a id="integration" href="#integration">Integration</a></li>
	<li><a id="information-architecture" href="#information-architecture">Information Architecture</a></li>
</ul>
<pre>

Now you can create links from external pages and view the projects of a single portfolio category by adding a “#category_name” at the end of the url. The “#category_name” represents the “href” attribute of each menu item. Also “category_name” has to be the menu item’s id.

I hope that was helpful.

About these ads