This site requires a higher resolution.

Estava precisando de algo simples. Fazer zoom em uma imagem utilizando um ‘slider’. Imaginei que seria fácil encontrar. Alguém já deve ter feito isso, pensei.

Comecei procurando algum plugin Jquery. Até encontrei algumas coisas bem bacanas, tipo:

Loupe

http://jdbartlett.github.com/loupe/

loupe

O Loupe é um plugin que cria uma espécie de lente de aumento ao passar o mouse na imagem. É legal, mas não era o que eu procurava.

jQZoom

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

jqzoom

Faz mais ou menos a mesma coisa que o Loupe, mas mostra o zoom em outra div. Legal, mas não era isso.

gzoom

http://lab.gianiaz.com/jquery/gzoom/

gzoom

A coisa começou a esquentar, mas ainda não era bem isso. Tudo bem, tem um slider pra fazer o zoom, mas a implementação é meio falha, não dá pra arrastar a imagem. Não gostei.

Mapbox

http://wayfarerweb.com/jquery/plugins/mapbox/

mapbox

Opa ! Esse resolve meu problema. Não tem slider, mas é bem interessante. Dá pra adicionar os controles, o zoom funciona com o ‘mousewheel’ e dá pra arrastar e soltar a imagem quando aplicado o zoom.

Funciona, mas não gostei muito do código. Ele usa 4 tamanho diferentes da mesma imagem, o que tornaria complicado se fosse preciso usar em uma aplicação dinâmina. Além disso…não tem o maledeto ‘slider’.

Eu já tava quase desistindo. Vou ficar com esse mesmo, disse.

Mas surgiu o Magento.

magento

Magento é um sistema de e-commerce que possui, entre outras coisas, diversas extensões para aplicar aos produtos de uma loja virtual. O código não é explícito, mas deu pra fazer umas “adaptações”, que você pode conferir aqui.

Me deu tanto trabalho essa birosca, que acho legal compartilhar.

Download de todos os arquivos (zip)

Afinal como diria Pablo Picasso: “Good artists borrow, great artists steal.”