Imagem do jQuery Lost On Fade, ajuda!

Question

Recentemente, lancei minha página de portfólio e usei um plug -in jQuery para classificar as entradas do meu portfólio com base em suas aulas. Por favor, veja Aqui

Você notará que, quando você rolar cada imagem, ela aumenta e um link de estudo de caso aparece. É assim que deve parecer. Quando você pressiona o botão Logos & Branding (em cima), ele também funciona perfeitamente. MAS, pressione qualquer um dos outros botões e role sobre uma imagem. Desaparece! A única maneira de fazer essa imagem voltar, é voltar à seção "All" ou "Logos & Branding" e rolar a imagem ausente.

Parece que não consigo descobrir por que parte disso está funcionando e a maioria não. O código parece ser consistente, mas talvez eu esteja perdendo alguma coisa. Obrigado.

Answer 1

Isso acontece porque você calcula a largura e a altura desde o primeiro .zitem que você encontra

width = $('.zitem').width() * zoom;
height = $('.zitem').height() * zoom;

Quando o primeiro item está oculto (devido à filtragem), sua tela é definida como nenhuma, então sua largura e altura se tornam 0.

você precisará ler o primeiro .zitem visível ao ler a altura/largura como esta

width = $('.zitem:visible').width() * zoom;
height = $('.zitem:visible').height() * zoom;

Faça a mesma coisa quando desviar a imagem