Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, me chamo André Dal Molin, sou desenvolvedor Front-End em Goiânia / Goiás.
Nessa semana que passou, durante o desenvolvimento do novo site da M.POLLO, precisei criar um certo tipo de 'zoom' em uma imagem bem grande. O conceito criado pelo designer era o seguinte:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i51.tinypic.com/dmp63c.jpg&key=b1b54f3dfacd907d088351d7e9c90d470f2671a7e262972328c5d686f6d2ebef" alt="dmp63c.jpg" />
http://i51.tinypic.com/dmp63c.jpg
Ao arrastar a rosa dos ventos, a imagem de fundo teria que mover proporcionalmente em relação ao movimento do mouse do usuário. Para isso, utilizei a biblioteca jQuery e jQuery UI, fazendo o build somente com a opção Draggable.
E então desenvolvi o código, que vocês poderão ver funcionando no site da M.POLLO quando o site for ao ar (www.mpollo.com.br - o que está online agora é o antigo 08/07/2011).
Porém como estou postando o tópico agora, e vocês não pode ver online, hospedei no meu servidor o código. E dei um nome a ele, Zoom Gordo. Vejam: http://admolin.com/zoom-gordo/
O exemplo que está na URL acima contém apenas o básico do funcionamento, que é o que pretendo compartilhar pois qualquer outra funcionalidade que venha a existir é específica de cada site e não vem ao caso. No novo site da M.POLLO, por exemplo, existe um slider integrado ao zoom, então logicamente o código contém mais métodos, mas que como disse, não vem ao caso.
Bom, vamos ao código do Zoom Gordo rsrs.
jquery.zoom.gordo.js
/**
* Zoom Gordo.
*
* @author André Dal Molin <andre@admolin.com>
* @link http://bit.ly/odJtef
*/
( function( $ ) {
$( function() {
function ZoomGordo( path ) {
var wrapper = $( path ),
image = wrapper.children( 'img' ),
draggable = wrapper.find( '.draggable' ),
draggable_wrapper = draggable.parent(),
props = { step : {} };
this.init = function() {
draggable.draggable( {
containment : 'parent',
create : function() {
ZoomGordo.setBaseValues().setInitialPosition();
},
drag : function() {
image.css( {
'left' : ( ( - ( draggable.position().left - props.draggableLeft ) * props.step.x ) + props.imageLeft ) + 'px',
'top' : ( ( - ( draggable.position().top - props.draggableTop ) * props.step.y ) + props.imageTop ) + 'px'
} );
}
} );
};
this.setBaseValues = function() {
props.imageWidth = image.width(), props.imageHeight = image.height();
props.imageTop = ( - ( ( props.imageHeight / 2 ) - ( wrapper.height() / 2 ) ) );
props.imageLeft = ( - ( ( props.imageWidth / 2 ) - ( wrapper.width() / 2 ) ) );
props.draggableLeft = ( draggable_wrapper.width() / 2 ) - ( draggable.width() / 2 );
props.draggableTop = ( draggable_wrapper.height() / 2 ) - ( draggable.height() / 2 );
props.step.x = ( ( props.imageWidth - wrapper.width() ) / 2 ) / props.draggableLeft;
props.step.y = ( ( props.imageHeight - wrapper.height() ) / 2 ) / props.draggableTop;
return this;
};
this.setInitialPosition = function() {
image.css( { left : props.imageLeft + 'px', top : props.imageTop + 'px' } );
draggable.css( { top : props.draggableTop + 'px', left : props.draggableLeft + 'px', visibility : 'visible' } );
return this;
};
}
/** +--------------------------------------------------------+ **/
var ZoomGordo = new ZoomGordo( '#zoom-gordo' );
ZoomGordo.init();
} );
} )( jQuery );Marcação HTML
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie ie6" dir="ltr" lang="pt-BR"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie ie7" dir="ltr" lang="pt-BR"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie ie8" dir="ltr" lang="pt-BR"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie ie9" dir="ltr" lang="pt-BR"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js no-ie" dir="ltr" lang="pt-BR"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Zoom Gordo - Made By André Dal Molin (@andredal) - admolin.com</title>
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" media="all" href="min/b=css&f=reset.css,zoom-gordo.css" />
<script src="min/b=js&f=libs/modernizr-2.0.min.js"></script>
</head>
<body>
<div id="zoom-gordo">
<img src="images/sample.jpg" alt="" />
<div class="draggable-wrapper">
<div class="draggable"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>!window.jQuery && document.write( unescape( '%3Cscript src="min/b=js&f=libs/jquery-1.6.1.min.js"%3E%3C/script%3E' ) )</script>
<script src="min/b=js&f=libs/jquery-ui-1.8.14.custom.min.js,jquery.zoom.gordo.js"></script>
</body>
</html>zoom-gordo.css
/*
Document : Zoom Gordo
Created on : 08/07/2011, 14:02:00
Author : André Dal Molin (@andredal) - admolin.com
Description:
CSS do Zoom Gordo.
*/
#zoom-gordo {
width: 960px; height: 700px;
position: relative;
margin: 50px auto 0;
overflow: hidden;
}
#zoom-gordo > img { display: block; position: absolute; }
#zoom-gordo .draggable-wrapper {
position: relative;
z-index: 500;
width: 100%; height: 100%;
top: 0; left: 0;
}
#zoom-gordo .draggable {
position: absolute;
width: 259px; height: 256px;
background: url( '../images/draggable.png' ) no-repeat;
z-index: 501;
cursor: move;
}
#zoom-gordo .draggable.ui-draggable-dragging { cursor: auto; }Para quem quiser o código completo, pode baixar por aqui: http://www.megaupload.com/?d=813MMS7M
Abraços ;)
Ah, esqueci de avisar uma coisa.
Todo o funcionando do script é relativo ao tamanho do elemento .draggable-wrapper. Pera ai, como assim? Bom, se você deixar o .draggable-wrapper com width e height igual a 100%, ou seja, ele vai ocupar todo o espaço de #zoom-gordo e consequentemente o elemento .draggable terá os limites de movimento exatamento do tamanho do container (#zoom-gordo).
Porém se você alterar o tamanho do .draggable-wrapper, o script terá um comportamento diferente. Para isso, vou mudar o CSS para esse:
#zoom-gordo .draggable-wrapper {
position: absolute;
z-index: 500;
width: 100px; height: 100px;
top: 100px; left: 100px;
border: 5px solid red;
}
#zoom-gordo .draggable {
position: absolute;
width: 10px; height: 10px;
background: blue;
z-index: 501;
cursor: move;
}Ao mudar apenas esse CSS, veja o acontece com o zoom gordo. :)
Exemplo online: http://admolin.com/zoom-gordo-2/
Mude o nome do efeito LOGO, hehehehe, mais ficou legal mesmo, parabéns. Preciso tirar um dia para colocar minhas proezas aqui também!
Eu também acho kkkkk, eu custei dar um nome pra isso, não tenho ideia de um nome legal. Se tiver sugestão, manda ae rs.
Bem interessante.
Sobre um nome, que tal MovingFocus?
Legal, gostei do MovingFocus.
Depois altero tudo, e talvez ja publique no Github.
Valeu, abraços.
Hum cara, no IE ta ok, agora nos demais navegadores... ta dando problemas
Hmm, percebi Ted. O problema é que esse código veio do site que eu fiz na empresa, e lá a estrutura estava um pouco diferente, pois o 'MovingFocus' (valeu Bruno hehe) contava com um slider integrado, duas mascaras e tal.
O que aconteceu foi o seguinte. O método .position() do jQuery tem um funcionamento diferente nos navegadores quando o elemento pai tem position absolute. No firefox e ie funcionou de boa, no chrome ele já não reconheceu o pai com posicionamento. O que eu fiz foi mudar o position de .draggable-wrapper para relative. Agora ficou perfeito em todos os navegadores.
Valeu!!
>
Legal, gostei do MovingFocus.
Depois altero tudo, e talvez ja publique no Github.
Valeu, abraços.
Beleza, despacha essa moto aqui pra casa e estamos conversados :P
hehe, bem legal cara. parabens.
só acho que você deveria mudar o nome do efeito,pois não tem zoom nenhum. =)