$(document).ready(function() { $('ul#filter a').click(function() { $(this).css('outline','none'); $('ul#filter .current').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').slideDown('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).slideUp('normal').addClass('hidden'); } else { $(this).slideDown('slow').removeClass('hidden'); } }); } return false; }); });
<!--[if lt IE 7]> <style>ul#portfolio li { margin-right: 5px; } </style> <![endif]--> <div id="container"> <ul id="filter"> <li class="current"><a href="#">All</a></li> <li><a href="#">red</a></li> <li><a href="#">blue</a></li> <li><a href="#">green</a></li> <li><a href="#">yellow</a></li> <li><a href="#">black</a></li> <li><a href="#">xmas</a></li> </ul> <ul id="portfolio"> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="green xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-green.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="green xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-green.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="green xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-green.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="green xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-green.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="green xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-green.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="green xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-green.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="green xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-green.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="red xmas"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-red.jpg" alt="" height="100" width="100" /></a></li> <li class="yellow"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-yellow.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> <li class="blue"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-blue.jpg" alt="" height="100" width="100" /></a></li> <li class="black"><a href="#"><img src="http://kachibito.net/wp-content/uploads/2011/10/00-black.jpg" alt="" height="100" width="100" /></a></li> </ul> </div>
/* Portfolio Filter Stylesheet */ /*****Reset*****/ html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; } a { color: #333; } a:visited { } a:hover { text-decoration: none; } p, ul, ol, dl, table { margin-bottom: 18px; } ul, ol, dd { margin-left: 36px; } /*****Custom Classes*****/ .clearing { clear: both; } .last { margin-bottom: 0; } .screenReader { left: -9999px; position: absolute; top: -9999px; } /*****Basic Layout*****/ div#container { margin: 20px auto 0; overflow: hidden; width: 640px; } ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%; } ul#filter li { border-right: 1px solid #dedede; float: left; line-height: 16px; margin-right: 10px; padding-right: 10px; } ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; } ul#filter a { color: #999; text-decoration: none; } ul#filter li.current a, ul#filter a:hover { text-decoration: underline; } ul#filter li.current a { color: #333; font-weight: bold; } ul#portfolio { float: left; list-style: none; margin-left: 0; width: 672px; } ul#portfolio li { border: 1px solid #dedede; float: left; margin: 0 10px 10px 0; padding: 5px; width: 102px; background:#f7f7f7; } ul#portfolio a { display: block; width: 100%; } ul#portfolio a:hover { text-decoration: none; } ul#portfolio img { border: 1px solid #dedede; display: block; }