Criando uma lupa para ampliar imagens com JQuery e jqZoom

JQZoom é uma lupa para ampliar imagens inline construído numa biblioteca muito popular - o jQuery. É um script muito bom e fácil de implementar, para que se possa ampliar tudo o que quisermos.

Características Principais:

• Simples - Fácil de usar.
• Compatibilidade - Com outros scripts e plataformas.
• Fléxivel - Máximo controle sobre as opções disponíveis.
• Estilo - Fácil de personalizar.
• Bonito - Agradável de se ver.
• Trabalha com todos os browsers.

Instalação:

Para proceder à instalação deste script, é necessário fazer o download de todos os arquivos e diretórios do pack jQzoom para o seu servidor. O pack actual inclui o JS, CSS e diretórios de IMAGENS.

Nota: Se você decidir renomear os diretórios ou alterar a estrutura do diretório, revise o caminhos das imagens dentro do CSS e lembre-se de especificar os caminhos corretos dos arquivos na página que os vai chamar.

Adicione primeiro o último release da biblioteca jQuery, depois o script jQZoom (não se esqueça disto), a ordem correta destes passos é importante. Olhe para o código de instalação abaixo.

<script src="js/jquery-1.2.6.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.jqzoom-1.0.1.js" type="text/javascript"><!--mce:1--></script>

Adicione depois o arquivo jqzoom.css ao seu cabeçalho.

Como Usar:

Para usar o jQZoom é muito simples.

É necessário especificar o elemento âncora HTML que irá gerar a ampliação, revelando a porção da imagem aumentada.

<a class="MYCLASS" title="MYTITLE" href="images/BIGIMAGE.JPG">
<img title="IMAGE TITLE" src="images/SMALLIMAGE.JPG" alt="" /></a>

O elemento âncora molda a pequena imagem que pretende ampliar.
Seguindo este esquema, os elementos base necessários são:

• SMALLIMAGE.JPG: Representa a pequena imagem que você pretende ampliar.
• BIGIMAGE.JPG: Representa a imagem grande que jQZoom irá revelar.
• MYCLASS: Representa a classe âncora, que irá ser usada para instanciar o script jQZoom a todos os elementos, correspondendo a esta classe (você pode usar também um ID).
• MYTITLE/IMAGE TITLE: Título da âncora e/ou título da imagem que irá ser usada para revelar o título do zoom perto da janela jQZoom.

Agora chame o plugin junto à janela de carregamento.

$(document).ready(function(){
	$('.MYCLASS').jqzoom();
});

Isto irá instanciar o jQZoom no modo default.

Você pode passar mais opcções (veja aqui a documentação), para criar outros efeitos especiais personalizados.

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

Para mais informações visite o website do desenvolvedor web Marco Renzi.
Se for utilizar a aplicação, faça uma doação para o projeto. Desta forma obterá o suporte extra para o plugin e contribuirá para o crescimento do mesmo.

Requisitos: Plataforma jQuery
Demonstração: http://www.mind-projects.it/projects/jqzoom/
Download: jqzoom_ev1.0.1

Exemplo customizado - http://www.giuliano.eti.br/lab/jqzoom/demo/