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
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;
});
});
$('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;
});
});
Loading ...
“Filterable” Portafolio con jQuery | Squico
25-05-2009
Permalink
[...] Go to Source [...]