Boas, tenho aqui uma duvidazinha, aproveitando umas coisinhas daqui e outras dali, sim pq nao sou programador, sou designer, mas ja tenho umas bases jeitosas em programaçao, criei um script para o meu portfolio, de modo a que dependendo da categoria ele mostra ou nao o 'trabalho'.., ou seja tenho varios trabalhos, divididos em categorias e depois se escolher por exemplo a categoria 'print' ele mostra todos os que sao de print e esconde os outros, ate agora tudo bem, mas na altura nao pensei e fiz com que no inicio aparecesse todos os trabalhos, antes de escolher a categoria, ou seja, aparecem todos e depois se quiseremos podemos ver so os de print, etc..
ate aqui tudo bem, o codigo é o seguinte:
$(document).ready(function(){
$('ul#filter li a').click(function(){
$(this).css('outline','none');
$('ul#filter li.current').removeClass('current');
$(this).parent().addClass('current');
var filterVal=$(this).text().toLowerCase().replace(' ','-');
if(filterVal=='all'){
$('ul#portfolio').fadeOut('normal',function(){
$('ul#portfolio li.hidden').show().removeClass('hidden')});
$('ul#portfolio').fadeIn('normal')}
else{
$('ul#portfolio').fadeOut('normal',function(){
$('li',this).each(function(){
if(!$(this).hasClass(filterVal)){
$(this).fadeOut().hide().addClass('hidden')}
else{
$(this).fadeIn().show().removeClass('hidden')}})});
$('ul#portfolio').fadeIn('normal')}
return false;
})});
Mas agora, mudei de ideias e ja nao me interessa tanto mostrar todos mas sim que os que apareçam sejam os 'seleccionados' ou 'destacados', ja agora se alguem me der um nome de jeito agradecia, em ingles será 'featured'
ja tentei das seguintes maneiras:
$(document).ready(function(){
var filterVal = 'destaques';
$('ul#portfolio').fadeOut('normal',function(){
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut().hide().addClass('hidden');
} else {
$(this).fadeIn().show().removeClass('hidden');
}
$('ul#portfolio').fadeIn('normal');
});
});
$('ul#filter li a').click(function(){
$(this).css('outline','none');
$('ul#filter li.current').removeClass('current');
$(this).parent().addClass('current');
var filterVal=$(this).text().toLowerCase().replace(' ','-');
if(filterVal=='all'){
$('ul#portfolio').fadeOut('normal',function(){
$('ul#portfolio li.hidden').show().removeClass('hidden')});
$('ul#portfolio').fadeIn('normal')}
else{
$('ul#portfolio').fadeOut('normal',function(){
$('li',this).each(function(){
if(!$(this).hasClass(filterVal)){
$(this).fadeOut().hide().addClass('hidden')}
else{
$(this).fadeIn().show().removeClass('hidden')}})});
$('ul#portfolio').fadeIn('normal')}
return false;
})});
e
$(document).ready(function(){
$('ul#filter li a').click(function(){
$(this).css('outline','none');
$('ul#filter li.current').removeClass('current');
$(this).parent().addClass('current');
var filterVal=$(this).text().toLowerCase().replace(' ','-');
if(filterVal=='destaques'){
$('ul#portfolio').fadeOut('normal',function(){
$('li',this).each(function(){
if(!$(this).hasClass(filterVal)){
if(!$(this).hasClass(filterVal)){
$(this).fadeOut().hide().addClass('hidden')}
else{
$(this).fadeIn().show().removeClass('hidden')});
$('ul#portfolio').fadeIn('normal')}
else{
$('ul#portfolio').fadeOut('normal',function(){
$('li',this).each(function(){
if(!$(this).hasClass(filterVal)){
$(this).fadeOut().hide().addClass('hidden')}
else{
$(this).fadeIn().show().removeClass('hidden')}})});
$('ul#portfolio').fadeIn('normal')}
return false;
})});
Estes dois ultimos podem ter alguma falta de parentes porque escrevi isso agora aqui, pq nao guardei essas hipoteses porque nao resultaram e como tal escrevi de novo aqui e nao tive a contar a ver se tava tudo como deve ser, é so para terem uma ideia do que ja tentei e ainda nao consegui chegar ao que quero.
a proposito, o html ta assim:
<h1>Portfólio</h1>
<div class="grid_12">
<ul id="filter">
<li class="current"><a href="#">All</a></li>
<li><a href="#">Identidade</a></li>
<li><a href="#">Gráfico</a></li>
<li><a href="#">Ilustração</a></li>
<li><a href="#">Web</a></li>
<li><a href="#">3D</a></li>
<li><a href="#">Motion</a></li>
</ul>
</div>
<ul id="portfolio" class="column">
<li class="identidade">
depois disso vem o trabalho em si, é so para perceberem melhor o que estou a fazer e onde o JS vai buscar a 'data'..
Espero que me consigam ajudar,
obrigado desde ja!