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
Danilo gosta de novas tecnologias é focado em HTML5 / Javascript.
February 13th, 2009 at 8:01 pm
ficou interessante man..
abraço
February 28th, 2009 at 3:44 pm
Belas dicas desse seu blog. Gostei mesmo.
January 26th, 2010 at 10:40 am
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. =/
March 5th, 2010 at 2:01 pm
Só funciona com imagens? como aplicar num div?
May 29th, 2010 at 4:28 pm
amor naum conrespondido?!
August 28th, 2010 at 11:31 am
Oi Danilo,
Vc sabe se exite um plugin com este efeito que vc fez para wordpress?
Abraço,
October 4th, 2012 at 9:20 am
Obrigado abraço