Você já deve ter visto imagens com zoom, feito em flash ou em javascript, é bastante comum em sites de e-commerce. Eu fiz um modelo em javascript / jQuery em 4 passos.
Todos os passos, htmls e scripts estão disponÃveis para download.
Passo 1 – MyParallax
Passe o mouse sobre a imagem, que se deslocará horizontalmente:
O primeiro passo não vai ter nenhuma explicação pois ele já é um post antigo meu, explicando parallax e o evento mousemove>, o myParallax Parallax com javascript com jQuery. Quem não viu, veja pois é interessante, e quem já viu o post, reveja, pois vou utilizar esse script de base para o ImageZoom.
Lá no post eu explico linha por linha, o que o Javascript faz.
Passo 2 – Mouse Move Horizontal e Vertical
Passe o mouse sobre a imagem, que se deslocará horizontalmente e verticalmente:
E o que mudou do passo 1?
Agora o “parallax” é horizontal e vertical, quem abrir o código vai ver que basicamente só duplicamos o script do passo 1, alterando left por top, width por height, x por y.
Passo 3 – Mouse Move Horizontal e Vertical sobre outra imagem
Passe o mouse sobre o thumb:
O que mudou do passo 2?
Pouco, só que agora temos o thumb, e quando passamos o mouse em cima do thumb, obtenho uma porcentagem (por exemplo, se eu passar o mouse bem no meio do thumb seria 50% e 50%.
Depois é só posicionar a imagem dentro do container, com top e left.
E pra dar um efeito maior de zoom, coloquei a imagem da lupa como cursor.
Passo 4 – Caixa de luz
Passe o mouse sobre o thumb:
O que mudou do passo 3?
Esse teve a maior mudança, como funciona a caixa de luz?
São quatro quadrados com opacidade:
E quando movemos o mouse em cima do thumb os quadrados são redimensionados e reposicionados. E pra dar um efeito melhor, tirei o mouse no css com o cursor: none;
Lembrando que todos os exemplos, scripts e htmls estão disponÃveis para download.
[]s
Mais uma das coisas que anos atrás eu me matei pra fazer na mão, com javascript, e hoje em dia todas bibliotecas tem plugins para… hehe
[]s!
bem legal Danilo ..
Pingback: Zoom de Imagem em Javascript e jQuery - Passos 5 e 6 | TidBits
Muito bom mesmo.
Sou fã do JQuery. Ele deixa todo e qualquer javascript bem mais interessante =D
parabens pelo post!!!
Gosto mto de versões codificadas de plugins que voce nao entende como funciona.
testei e esta funcionando em todos.
abços
E eu achava que jQuery era um bicho de mil cabeças…muito bom, era exatamente o que eu precisava aprender…Valeu!!1
excelente tutorial!
Parabéns!!
Eai Danilo, show de bola esse efeito hein cara! Parabéns amigo.
Cara eu gostaria de saber como posso executar esse efeito em uma imagem que ocupe toda tela (fullscreen), igual à esse:http://www.pullandbear.com/webapp/wcs/stores/servlet/category/pullandbearad/en/pullandbear/29550/%C2%B7%2BPhotos
Estou com um projeto que o cliente está pedindo esse efeito e eu estou apanhando.
Pode me dar uma dica amigão?
Grande abraço…
Muito bom!!
Danilo, estou tentando utilizar o zoom em uma exibição de um arquivo .pdf. Dos modelos, o que melhor me serviu foi o modelo 5 (que tem os botões de aumentar e diminuir o zoom) que estava no pacote de download. Contudo não estou conseguindo adaptar o código para inserir o arquivo .pdf ao invés de uma imagem. Você sabe se é possÃvel fazer isto utilizando o mesmo código (mudando apenas o css)? Ou é mais viável procurar outra forma de resolver meu “probleminha”?! Caso você já tenha feito algo do tipo pode me dar uma dica?!
Agradeço desde já atenção!!