Avatar

[jquery] Efeito De Zoom Em Imagens

[jquery] efeito de zoom em imagens

Escrito por Lucasbr em JavaScript e Ajax. Data: 27/07/2008

Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original

Ver tópico original no fórum.

E ai galera, tudo blz?

Segue um codigo para dar zoom em imagens usando jquery:

Exemplo: http://forum.ievolutionweb.com/lucas/tutoriais/zoom_jquery/

Download do exemplo: http://forum.ievolutionweb.com/lucas/tutoriais/zoom_jquery/zoom_jquery.zip

Arquivos usados:

Jquery: http://www.jquery.com
Plugins: http://www.mind-projects.it/blog/jqzoom_v10

Explicacoes iniciais:

1)Inclua o arquivo <i>jqzoom.css</i> em sua página.

CODE
                <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">


2)Incluir os arquivos jQzoom e jQuery

CODE
<script type="text/javascript" src="js/jquery.js"></script>
                <script type="text/javascript" src="js/jquery.jqzoom.js"></script>


3)Cria a div container para as imagens que vc quer dar o zoom e atribuir a classe jqzoom

exemplo:
CODE
                <div class="jqzoom"><img src="images/shoe4_small.jpg"  alt="shoe"  jqimg="images/shoe4_big.jpg"></div>


4)Carregar o plugin no on ready

CODE
                $(document).ready(function(){
                $(".jqzoom").jqueryzoom();
                });


Voce tb pode especificar algumas opcoes:


CODE
                $(document).ready(function(){
                  $(".jqzoom").jqueryzoom({

                        xzoom: 300,        //zooming div default width(default width value is 200)
                        yzoom: 300,        //zooming div default width(default height value is 200)
                        offset: 40,        //zooming div default offset(default offset value is 10)
                        position: "right",  //zooming div position(default position value is "right")
                                                preload: 1    , // preload of images :1 by default
                        lens:1  // lens over the image   1 by default
                    });
                });


O arquivo final montado:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>zoom com jquery</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$(".jqzoom").jqueryzoom({
                xzoom: 300, //zooming div default width(default width value is 200)
                yzoom: 300, //zooming div default width(default height value is 200)
                offset: 10, //zooming div default offset(default offset value is 10)
                position: "right", //zooming div position(default position value is "right")
                preload:1,
                lens:1
            });



});
</script>
<link rel="stylesheet" href="style/jqzoom.css" type="text/css" media="screen" />
</head>
<body>
<p>Movimento o mouse sobre a imagem.</p>
                  <div style="float:left;width:100%;clear:both;" >              
                    <div style='float:left;width:100%;'><div class="jqzoom"  style='margin-right:5px;float:left;'><img src="images/shoe2_small.jpg"  alt="scarpa"  jqimg="images/shoe2_big.jpg"></div>
                  </div>


                       <p>Dentro de um container com position:relative</p>
                        <div style="border:1px solid #CCCCCC;padding:50px;float:left;clear:both;width:80%;margin-bottom:10px;"><div class="jqzoom"><img src="images/triumph_small.jpg"  alt="macchina"  jqimg="images/triumph.jpg"></div></div>


                         <div style="float:left;width:100%;clear:both;"><div class="jqzoom"><img src="images/me_small.jpg"  alt="scarpa"  jqimg="images/me_big.jpg"></div></div>

                </div>
         <span style="float:left;width:100%;height:200px;">&nbsp;</span>

</body>
</html>

Você gostou? Comente no fórum!

Comentários:

sodomo2 disse:

oi tudo bem meu nome é felipe ! e eu estou comessando novamente a mecher com net e

programação de paginas e as coisas mudaram muito desde que eu eu estudei isso !!!

e achei seu topico muito legal mas hj em dia eu to totalmente noob com relação a tudo isso

!!!

só pra ficar mais claro quendo eu estudei isso só existia html e quase nada de javascript

por isso que eu naum estou entendendo mais nada !! (era a época do office 97 ainda e o win

mais novo que tinha, e que tinha acabado de sair era o 98 só pra se ter uma ideia ) se tem

como passar algum link ou algo pra quem quer comessar do zero ?

vlw pela ajuda abraços !!

msn: felípe.lussim@hotmail.com
pode ser e-mail nele tb

abraços vlw pela ajuda !!

Olhos Espanhois disse:

não consigo ver o exemplo

Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).

Mais recentes em JavaScript e Ajax

Abandone o getelementbyid
Por Micox - “wtf mico? are you crazy?” - calma malucada, não estou...
Funções javascript equivalentes a funções
Por Micox - Php to javascript project: php.js...
Select dinâmico de estados e cidades
Por DGmike - Uma das dúvidas mais comuns para quem está começando...
Selecionar dinâmicamente um option de um select
Por Manito - Dica para quem fizer um form usando ajax...
Validador de fomulários v0.1 rc0 beta alpha
Por PXzin - [versÃo de teste em jquery]...

Ver mais Artigos de JavaScript e Ajax.

Ver e retirar outras dúvidas no fórum Webly.

Alguns Direitos Reservados | RSS | O Fórum

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com