Plugin jQuery ZooMove para Zoom de imagens no Hover

Se você já navegou em um site de comércio eletrônico, provavelmente já viu efeito de zoom de imagem. Você passa o mouse sobre uma foto do produto e essa parte da imagem aumenta para visão mais clara.

o Plugin ZooMove é uma ótima maneira de replicar esse efeito no seu site. Está alimentado por jQuery, para que você possa fazer isso rapidamente sem muito código.

ZooMove é totalmente gratuito e de código aberto, disponível no GitHub para quaisquer desenvolvedores curiosos. Pode ser instalado através npm, Bower, Fio, ou baixado diretamente de CDNJS.

Para configurar uma imagem do ZooMove, você precisará três arquivos específicos no cabeçalho da sua página:

1. jQuery
2. CSS ZooMove
3. ZooMove JS

Ambos os arquivos ZooMove pode ser reduzido se você quiser carregamentos de página mais rápidos. Você também pode combinar o arquivo CSS em sua folha de estilo principal, se é mais fácil.

Toda a verdadeira mágica acontece no HTML, onde você pode definir HTML5 atributos data- * para os diferentes efeitos.

Isso permite que você crie efeito de zoom personalizado com base em quatro parâmetros diferentes:

1. data-zoo-scale - define o tamanho total do zoom ao passar o mouse (por exemplo, 2,0 para 200%)
2. data-zoo-move - define se a imagem se move junto com o cursor
3. data-zoo-over - define a imagem ampliada aparecem sobre o original
4. data-zoo-cursor - define o ponto do cursor

Um quinto parâmetro final permite definir o que o novo URL da imagem deve ser (se necessário).

Você pode usar o ZooMove em todos os principais navegadores, incluindo o IE9 +. Este plugin é amplamente suportado e oferece uma experiência de usuário.

Se você está procurando por um biblioteca simples de hover para zoom O ZooMove é uma excelente escolha. Está leve o suficiente para rodar em qualquer site e é alimentado por jQuery, então você não precisará escrever tanto código para fazê-lo funcionar.

Visite a página principal para ver em ação e confira a documentação no GitHub para saber mais.