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 é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)
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?!