Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

André D. Molin

Zoom Gordo - Zoom Legal c/ jQuery UI

By André D. Molin, in Javascript

Recommended Posts

André D. Molin    15

André D. Molin
Posted

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:

 

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/

Share this post

Link to post
Share on other sites

William Bruno    1501

William Bruno
Posted

hehe, bem legal cara. parabens.

 

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

Share this post

Link to post
Share on other sites

Bruno Augusto    417

Bruno Augusto
Posted

Bem interessante.

 

Sobre um nome, que tal MovingFocus?

Share this post

Link to post
Share on other sites

André D. Molin    15

André D. Molin
Posted

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

Share this post

Link to post
Share on other sites

Bruno Augusto    417

Bruno Augusto
Posted

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

Share this post

Link to post
Share on other sites
Go To Topic Listing Javascript
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept