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/
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/
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/
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/
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 é 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.”