Uma solução muito interessante para mostrar imagens ampliadas em seu site.

http://www.mind-projects.it/projects/jqzoom

Instalação:

Sua instalação e utilização do jQZoom é muito fácil e rápida, basta fazer o upload dos arquivos para um diretório no servidor e seguir os passos abaixo:

Adicionar o arquivo Javascript do plugin e caso ainda nao tenho a biblioteca jQuery.

<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>

Note que no exemplo acima os arquivos se encontram na pasta js.


 
Adicionar agora o arquivo css do jQZoom, que depois poderá ser editado para ficar da maneira que você precisa.

<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

Note que o CSS se encontra na pasta css.

Implementação:

Para fazer o jQZoom funcionar você precisa dar a todos os links que tenham a imagem ampliada como caminho (src) uma classe, no exemplo chamei a classe

de minha_classe.
 

<a href="images/imagem.jpg" class="minha_classe"  title="titulo">
<img src="images/imagem_pequena.JPG" title="titulo da imagem" alt="texto alternativo da imagem"  >
</a>

Agora precisamos colocar o código javascript que dirá ao javascript que aquela classe irá ativar o jQZoom.

<script type='text/javascript' >
$(document).ready(function(){
    $('.minha_classe).jqzoom();
});

</script>

                   

O código apresentado acime seria para a apresentação de imagens no modo padrão, mas você poderá fazer algumas alterações no modo de exibição conforme no exemplo abaixo:

<script type='text/javascript' >

$(document).ready(function(){
    var options = {
        zoomWidth: 300,
        zoomHeight: 250,
            xOffset: 10,
            yOffset: 0,
            position: "right"
};
    $('.minha_classe).jqzoom(options);
});
                   

</script>

   

Veja a documentação para obter informações sobre todas as alternativas possíveis no plugin.

Abraço.

• erickalves's blog
• Indique a um amigo