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

9 thoughts on “Imagem com zoom em Javascript e jQuery – ImageZoom

  1. Pingback: Zoom de Imagem em Javascript e jQuery - Passos 5 e 6 | TidBits

  2. Muito bom mesmo.
    Sou fã do JQuery. Ele deixa todo e qualquer javascript bem mais interessante =D

  3. parabens pelo post!!!

    Gosto mto de versões codificadas de plugins que voce nao entende como funciona.

    testei e esta funcionando em todos.

    abços

  4. E eu achava que jQuery era um bicho de mil cabeças…muito bom, era exatamente o que eu precisava aprender…Valeu!!1

  5. Muito bom!!
    Danilo, estou tentando utilizar o zoom em uma exibição de um arquivo .pdf. Dos modelos, o que melhor me serviu foi o modelo 5 (que tem os botões de aumentar e diminuir o zoom) que estava no pacote de download. Contudo não estou conseguindo adaptar o código para inserir o arquivo .pdf ao invés de uma imagem. Você sabe se é possível fazer isto utilizando o mesmo código (mudando apenas o css)? Ou é mais viável procurar outra forma de resolver meu “probleminha”?! Caso você já tenha feito algo do tipo pode me dar uma dica?!
    Agradeço desde já atenção!!

Leave a Reply

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