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
Danilo é coordenador de interface da AdBat/Tesla, é Corinthiano e Vegan. Gosta de correr, de jogar xadrez, tênis, e futebol de videogame (no futebol de verdade ele é muito ruim). Programa de dia na AdBat/Telsa e de noite no 
February 12th, 2009 at 10:03 am
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!
February 12th, 2009 at 8:51 pm
bem legal Danilo ..
February 13th, 2009 at 2:59 pm
[...] fazer mais um passo do último post Imagem com zoom em Javascript e jQuery – ImageZoom. Apesar de ser o último passo não é o mais complicado e achei [...]
July 30th, 2009 at 4:01 am
Muito bom mesmo.
Sou fã do JQuery. Ele deixa todo e qualquer javascript bem mais interessante =D
August 30th, 2010 at 4:50 pm
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
September 29th, 2010 at 9:36 am
E eu achava que jQuery era um bicho de mil cabeças…muito bom, era exatamente o que eu precisava aprender…Valeu!!1
October 3rd, 2011 at 10:58 pm
excelente tutorial!
Parabéns!!
December 5th, 2011 at 10:26 am
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…