Como ampliar imagens como média
A plataforma de blogging Medium usa um efeito de zoom de imagem personalizado em suas páginas do blog. Sempre que o usuário clica em uma imagem, ela amplia automaticamente para um tamanho maior.
É um ótimo efeito e certamente único para o Medium, mas nunca foi algo que pudesse ser facilmente copiado.
Agora, com o MediumLightbox roteiro, é mais fácil do que nunca. Este script JS é leve e fácil de adicionar em qualquer site ou blog.
Se você gostaria de ver como isso funciona, você pode visitar o página de demonstração ao vivo hospedado pelo criador Davide Calignano.
Ele passou um tempo pregando a transição exata e o efeito de animação personalizado para crie uma imagem espelhada do zoom de imagem do Medium. A biblioteca inteira é escrito em JavaScript puro, por isso não depende de nenhum 3rd scripts de festa como jQuery.
Você precisará saber um pouco de JS para configurá-lo, mas você certamente não precisa ser um especialista.
Cada imagem pode levar atributos data- * para definir a altura e largura de tamanho total, todas elas puxado dinamicamente do plugin do lightbox. O código de configuração é muito simples e pode segmentar as próprias imagens, ou recipientes como o
Aqui está o único snippet de código que você precisa para ter o plugin em execução:
MediumLightbox ('figure.zoom-effect'); Dentro da função, você vai passar um seletor para todos os elementos (por exemplo,. .efeito de zoom classe. Esta classe é especificamente definido na folha de estilo do MediumLightbox, por isso é melhor usá-lo também na sua página.
E, uma vez configurado, você está pronto!
Na área de conteúdo da sua página, você pode agrupar todas as imagens em um
Para fazer o download de uma cópia deste script e começar, visite o repositório principal do GitHub. Aqui, você também encontrará documentação junto com trechos de código você pode copiar para configurar rapidamente.
