em Uncategorized |

Zoom em imagem por javascript

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)

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>

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:

<div id="square_slider" class="slider">
    <div id="square_slider_handle"></div>
</div>

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

<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>

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).

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"});
             }
         });

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>

Publicado

Escreva um comentário

Comentário