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