Zoom em imagem por javascript

2009-03-20 15:05:37
Por Chris Benseler em Internet, Programação,

Como criar uma ferramenta de zoom em imagem no javascript através de um slider

Vou mostrar como fazer um zoom em uma imagem usando javascript, usando um slider para controlar.

O mesmo pode ser visto funcionando aqui!

No caso, utilizei o framework script.aculo.us para criar o slider - mas a lógica vale para qualquer outra biblioteca javascript.

Vamos num passo-a-passo

Inseri no html uma imagem:

<img src="img2.png" alt="imagem" id="zoomImg" />

Depois de ter o script.aculo.us, é feito o include dele e da prototype (ela é usada pela engine do script.aculo.us)

No html, deve ser criada uma div com outra dentro. A pai será a área por onde o slider poderá correr, e a filha, o slider propriamente deito:

No CSS, formato o layout das mesmas, imaginando que será um slider vertical:

O próximo passo é criar o comportamento do slider. Isso é feito usando a classe Control (implementada pelo script.aculo.us), que possui um método Slider o qual cria o comportamento do slider. A documentação é bem complexa, por isso vou me ater a essa implementação.
Nesse caso, crio uma área de slider (div id="square_slider") cujo slider é controlado pelo elemento div id="square_slider_handle".
Para esse slider, passo as seguintes parametrizações:

range: valor mínimo e máximo da área de slide
slidervalues: valor mínimo e máximo em que o slider pode percorrer
axis: direção do slider
onChange: função que é chamada quando o usuário acaba de fazer o slide

No caso, digo que é um slider que varia de valores entre 20 e 100, com os mesmos valores máximos, vertical. A função no onChange é onde faço o cálculo. Essa função recebe como parâmetro o valor onde o slide foi solto. Com isso, calculo uma relação (ratio) entre o valor do slide e um valor base (no caso, 600, que é a largura da imagem).

Você pode fazer download do pacote completo, funcional :)

Abaixo, segue o html inteiro da página, para visualização

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Slider</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
    <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
    <style type="text/css">
        div.slider { width:10px; margin:10px 0; background-color:#ccc; height:100px; position: absolute; top:20px; left:20px; z-index:10000000000;}
        div.slider div { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }
    </style>
    <script type="text/javascript">
        window.onload = function() {

            var square_slider = new Control.Slider("square_slider_handle", "square_slider", {
                range: $R(20, 100),
                values: $R(20, 100),
                sliderValue: [100],
                axis: "vertical",
                onChange: function(value) {
                    //divide o valor por 100 para achar a taxa de zoom
                    var ratio = value/100;
                    /*
                    multiplica a largura da imagem pelo inverso do ratio
                    Observação: o valor de width é a base usada para cálculo; no exemplo, é o tamanho original da imagem
                    */
                    var width = 600;
                    $("zoomImg").setStyle({width: Math.round(width/ratio) + "px"});
                }
            });
        }
    </script>
</head>
<body>

<div id="square_slider" class="slider">
    <div id="square_slider_handle"></div>
</div>
<img src="img2.png" alt="imagem" id="zoomImg" />
</body>
</html>