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

7 thoughts on “Zoom de Imagem em Javascript e jQuery – Passos 5 e 6

  1. Cara muito bom, mas o único defeito é que ao invés navegar pela imagem movendo o mouse, seria melhor clicando e arrastando… porque assim eu posso deixar o zoom onde eu quero. Se eu tento tirar o mouse da imagem ele move e sai da onde eu deixei o zoom. =/

  2. Oi Danilo,

    Vc sabe se exite um plugin com este efeito que vc fez para wordpress?

    Abraço,

Leave a Reply

Your email address will not be published. Required fields are marked *