Zoom de imagens com JQzoom

Hoje vou mostrar para vocês como implementar um mecanismo de zoom de imagens utilizando JQuery com o plugin JQzoom. Essa técnica consiste em passar o mouse sobre uma determinada área da imagem e ao lado aparecer um zoom instantâneo da seleção. Isso é bastante utilizado em sites de e-commerce, pois assim é possível verificar cada detalhe de um produto.

Antes de começar, é importante que façamos o download dos arquivos do plugin e que organizemos os nossos arquivos e diretórios.Para fazer o download do plugin e seus arquivos, clique aqui. Descompacte os arquivos.

Crie uma pasta com o nome do seu projeto (no meu caso, criei um projeto chamado jqzoom). Dentro dessa pasta vou copiar as sub-pastas css, images e js descompactadas do download do plugin.

Agora vou criar o arquivo index.html, que é onde implementarei o nosso exemplo.

Mas antes disso é importante copiar uma imagem em alta resolução e uma miniatura (thumb) da mesma para dentro da pasta images (São essas imagens que serão utilizadas no exemplo). No meu caso, copiei as imagens ferrari.jpg e ferrari_thumb.jpg para dentro da pasta images.

Agora, vamos à implementação do arquivo index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <title>JQZoom</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="js/jquery-1.6.js" type="text/javascript"></script>
        <script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/jquery.jqzoom.css" type="text/css">
        <script type="text/javascript">
            $(document).ready(function(){
                $('.jqzoom').jqzoom({
                    zoomType : 'reverse'
                });
            })
        </script>
    </head>
    <body>
        <a href="images/ferrari.jpg" class="jqzoom" title="Imagem">
            <img src="images/ferrari_thumb.jpg" title="Ferrari" />
        </a>
    </body>
</html>

No cabeçalho do arquivo eu faço a importação dos 2 arquivos do plugin + o jquery. Depois, no corpo do documento, basta criar um link com o href definido para a imagem em tamanho normal (grande) e definir uma class. Dentro do link colocamos um img com a imagem reduzida (thumb).

Nas linhas 9à 15 eu informo que a classe definida no link deverá receber o efeito de zoom. Na função do plugin eu posso definir alguns parâmetros para customizar o efeito. No exemplo eu coloquei apenas que o tipo do zoom (zoomType) seria o reverse.

Veja alguns parâmetros que podem ser utilizados:

  • zoomType: Tipo do zoom a ser utilizado. Padrão: standard (Outras opções: reverse, drag e innerzoom)
  • zoomWidth: Largura do zoom. Padrão: 300
  • zoomHeight: Altura do zoom. Padrão: 300
  • xOffset: Distância na horizontal do zoom com relação ao thumb. Padrão: 10
  • yOffset: Distância na vertical do zoom com relação ao thumb. Padrão: 0
  • position: Local onde o zoom aparecerá com relação ao thumb. Padrão: right (Outras opções: top, left e bottom )
  • preloadimages: Se irá carregar a imagem grande antes de aplicar o efeito. Padrão: true
  • preloadText: Texto que aparece enquanto a imagem grande está sendo carregada. Padrão: Loading Zoom
  • title: Mostra um pequeno título na janela de zoom. Se a propriedade title do link da imagem grande estiver definido, este será utilizado. Padrão: true
  • lens: Mostra uma lente na imagem thumb que acompanha o movimento do cursor do mouse. Padrão: true
  • imageOpacity: Opacidade da imagem quando o zoomType está definido como reverse. Padrão: 0.4
  • showEffect: O efeito de quando o zoom é acionado. Padrão: show (Outra opção: fadein)
  • hideEffect: O efeito de quando o zoom é desacionado. Padrão: hide (Outra opção: fadeout)
  • fadeinSpeed: Velocidade do efeito caso o showEffect esteja definido com fadein. Padrão: slow (Outras opções: fastou o tempo (em milisegundos))
  • fadeoutSpeed: Velocidade do efeito caso o hideEffect esteja definido com fadeout. Padrão: 2000(Outras opções: fast, slowou o tempo (em milisegundos))

E pronto, basta executar o seu projeto e ver como esse efeito é bem interessante.

Para ver o exemplo desse post, clique aqui. Para baixar os arquivos desse exemplo, clique aqui.

Abs!

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Nenhum post relacionado

Comentários

  1. Tenho varias duvidas, estou tentando aprender mas não consigo, poderia me ajudar?
    primeiro: Criar arquivos- index.html, e colocar aquelas duas primeiras linhas de códigos que aparecem sempre é que não sei exatamente onde, como criar esses códigos HTML, meus blogs são blogger e entro naquele cód. HTML para alterar algo na página do blog. utilizo também inclusão através do java/ mas esse que voce mostra ai não sei extamente onde utilizar.? poderia me dar uma orientação básica, por favor.?

    Responder

  2. Fiz o passo-a-passo, porém, quando abri no Internet Explorer, não funciona. Gostaria de saber se existe algum código que eu posso acrescentar no css para o zoom de imagem funcionar em todos os navegadores.

    Obrigada desde já.

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *