porfoliojquery.jpg

Creating a “Filterable” Portfolio, una atractiva practica basada en jQuery para filtrar categorías. Posee un efecto simple pero llamativo y fue desarrollada pensando en la creación de porfolios personales. Suponiendo que tengamos 5 categorías principales: Diseño, Desarrollo, Webs, CMS, logos, Grafica. Una vez que se hace clic sobre una de las categorías del menú de navegación, solo se mostraran las imágenes que formen parte de esa sección, el resto desaparecerá y permanecerá oculto. Otra forma muy interesante para hacer aun más atractivo nuestros porfolios.
Ver demo - Mas Info y Descarga Creating a “Filterable” Portfolio

PLAIN TEXT
JavaScript:
$(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').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');
                }
            });
        }
       
        return false;
    });
});