Zoom de Imagem em Javascript e jQuery – Passos 5 e 6

Resolvi 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 interessante

Passo 5 – botões para aumentar e diminuir Zoom

Passe o mouse sobre a imagem e clique em + e – para aumentar e diminuir o zoom.

A partir do passo 2, foram adicionados dois botões que aumentam ou diminuem 3% do tamanho da imagem e depois recalcula tudo para fazer o parallax, bem simples.

Passo 6 – MouseWheel

E pra finalizar, fiz um script (na verdade comecei ele, não cheguei a finalizá-lo) que usa o mouse wheel para controlar o zoom, se você não sabe trabalhar com isso, dê uma olhada num post antigo meu que mostrar como adicionar um evento ao mouse wheel . Esse script deixei num arquivo a parte (pq senão atrapalharia o scroll aqui), então veja o ImageZoom com mouse wheel aqui

O que eu disse que não terminei no script é que, quando o mouse está sobre a imagem e ao mesmo tempo roda o wheel, dá umas travadas bruscas que precisam ser suavizadas.

Devo lembrar que todos os passos, htmls e scripts estão disponíveis para download.

[]s

Imagem com zoom em Javascript e jQuery – ImageZoom

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:

imagezoom passo 4

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