Zoom Gordo - Zoom Legal c/ jQuery UI

André D. Molin · Julho 8, 2011

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:

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/

William Bruno · Julho 8, 2011

hehe, bem legal cara. parabens.

só acho que você deveria mudar o nome do efeito,pois não tem zoom nenhum. =)

Ted k' · Julho 8, 2011

Mude o nome do efeito LOGO, hehehehe, mais ficou legal mesmo, parabéns. Preciso tirar um dia para colocar minhas proezas aqui também!

André D. Molin · Julho 8, 2011

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.

Bruno Augusto · Julho 8, 2011

Bem interessante.

Sobre um nome, que tal MovingFocus?

André D. Molin · Julho 8, 2011

Legal, gostei do MovingFocus.

Depois altero tudo, e talvez ja publique no Github.

Valeu, abraços.

Ted k' · Julho 8, 2011

Hum cara, no IE ta ok, agora nos demais navegadores... ta dando problemas

André D. Molin · Julho 8, 2011

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

Bruno Augusto · Julho 8, 2011

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

Arquivado

Zoom Gordo - Zoom Legal c/ jQuery UI

Recommended Posts

André D. Molin 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

André D. Molin 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

André D. Molin 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

André D. Molin 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante