Zoom Gordo - Zoom Legal c/ jQuery UI
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/
Discussão (8)
Carregando comentários...