Como expandir miniaturas como as Imagens do Google
O Imagens do Google executa uma interface do usuário exclusiva com pré-visualizações em miniatura de muitos sites diferentes. Clicar em qualquer uma dessas miniaturas expande a tela com mais detalhes e uma foto maior.
É um dos melhores recursos da galeria de imagens que usei e agora, você pode clonar com o Gridder.js.
Este plugin jQuery gratuito segue os passos do incrível UX do Google, criando um plugin que combina com esse efeito. Você pode Transforme qualquer galeria de fotos em uma galeria no estilo Imagens do Google com todas as mesmas animações e recursos de exibição.
Estou agradavelmente surpreso com a velocidade e facilidade de uso que vem com este plugin. Basta clicar em qualquer miniatura imediatamente exibe um tiro maior e as animações são super limpas.
As imagens incluir uma seção para texto descritivo caso você queira adicionar alguns detalhes ou links relacionados às fotos. Isso funciona especialmente bem para sites de portfólio simples com o objetivo de focar nas imagens.
Além disso, você pode também puxa conteúdo via Ajax. Isso permite que você criar miniaturas dinâmicas que extraem conteúdo de outros sites ou por meio de APIs.
Cada evento de clique oferece um método de retorno de chamada, para que você possa até mesmo executar outros plugins ou funções JavaScript ao lado do Gridder. Com tantas opções, praticamente parece uma estrutura inteira de grade!
Desde o Gridder roda em jQuery, Ele exige a versão mais recente como uma dependência. Mas, isso é tudo que você precisa (junto com o arquivo Gridder.js) e, com algumas linhas de HTML, você pode ter sua grade funcionando sem problemas.
Você deve verificar a página do GitHub para instruções completas de configuração mas aqui está um pré-visualização rápida de como o HTML se parece:
Todo o conteúdo Obtém puxado através de JavaScript, então você pode carregar praticamente qualquer coisa que quiser.
É um plugin incrivelmente versátil com opções para alterar a velocidade da animação, facilitar, fechar o estilo do botão e deslocar a posição de deslocamento para quando o usuário clica em uma nova miniatura.
Tanto novatos como desenvolvedores profissionais encontrarão muito valor neste plugin. No entanto, se você ainda não tiver certeza se isso é para você, dê uma olhada na página de demonstração ao vivo do Gridder e divirta-se.
