O Desenvolvedor é um blog de www.andafter.org
Chris Benseler
Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos
Status
Karma: 15754
Opiniões: 30
Mais deste autor
Zoom em imagem por javascript
Este texto foi classificado como Muito bomPor Chris Benseler
20 de Março de 2009
Como criar uma ferramenta de zoom em imagem no javascript através de um slider
Acompanhe O Desenvolvedor por Feeds!
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>
Você também pode gostar...
Comentários
Hoje eu tava pensando no uso de slider para um formulário (para setar valores), legal essa aplicação do slider... bem diferente das que eu já tinha visto :D
[Responder este comentário]
:)
[Responder este comentário]
soninha