Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lukinhasb

Como funciona esse plugin?

Por , em Javascript

Recommended Posts

lukinhasb    0

lukinhasb
Postado

Salve amigos

 

Estou editando o site de uma loja de roupas, e tem um plugin para ampliar imagem aqui, que mesmo com os arquivos fonte abertos não consigo entender como funciona...

 

www.gigbrasil.com.br

 

Assim que o site abrir, clique na foto da mulher, o plugin entrará em ação... É um modal onde você pode "navegar" pela imagem ampliada...

 

23jia00.jpg

 

Dica: Quando clico para abrir na imagem, o link aparece como: http://gigbrasil.com.br/#inverno2011_007.jpg

 

Segue relação de arquivos, gostaria de saber como adaptar este script para uma versão do site em HTML

 

www/scripts/imageZoom.js

$(window).load(function(){
if($('#image').width()>$('#container_image').width() || $('#image').height()>$('#container_image').height() ){

	// POSIÇÃO ABSOLUTA DO CONTEUDO NA TELA
	var pos_x = $('#container_image').offset().left;
	var pos_y = $('#container_image').offset().top;

	// LARGURA E ALTURA DO CONTAINER
	var container_x = $('#container_image').width();
	var container_y = $('#container_image').height();

	// LARGURA E ALTURA DO CONTEUDO
	var conteudo_x = $('#image').width();
	var conteudo_y = $('#image').height();

	// QUANTOS PX DO CONTEÚDO FICAM PRA FORA DO CONTAINER
	var diferenca_x = conteudo_x - container_x;
	var diferenca_y = conteudo_y - container_y;

	// POSICAO INICIAL ( na metade da tela)
	var metade_x = - parseInt(diferenca_x / 2);
	var metade_y = - parseInt(diferenca_y / 2);

	// POSICIONANDO CONTEUDO
	$('#container_image').mousemove(function(e){
		porcentagem_x = parseInt( (e.pageX - pos_x) / container_x * 100);
		porcentagem_y = parseInt( (e.pageY - pos_y) / container_y * 100);
		leftPosition = parseInt(0 - (diferenca_x  / 100 * porcentagem_x ));
		topPosition = parseInt(0 - (diferenca_y  / 100 * porcentagem_y ));
		$('#image').css({
			'left':leftPosition,
			'top':topPosition
		});
	});					

	// MOSTRANDO A IMAGEM
	$('#image').css('visibility','visible');
}

});

www/modal.htm

<div class="conteudo_modal">
   <div id="container_image">
       <iframe id="iframemodal" src="" frameborder="0" scrolling="no" width="468" height="310"></iframe>
   </div>
   <a class="ir close" href="#" rel="modalclose">fechar</a>
</div>
<script type="text/javascript">
   $(function ()
   {
       $("#iframemodal").attr("src", "imageZoom-passo-2.html?url=" + jQuery.url.param("url"));
   });
</script>

www/imageZoom-passo-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
   <title>ImageZoom</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta name="description" content="jquery" />
   <meta name="keywords" content="jquery" />
   <meta name="robots" content="all, index, follow" />
   <link href="css/default.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="scripts/jquery.url.js"></script>
   <script type="text/javascript">
       $(function ()
       {
           $("#image").attr("src", "imagens/colecao/" + jQuery.url.attr("anchor"));
           $("#image").load(function ()
           {
               if ($('#image').width() > $('#container_image').width() || $('#image').height() > $('#container_image').height())
               {

                   // POSIÇÃO ABSOLUTA DO CONTEUDO NA TELA
                   var pos_x = $('#container_image').offset().left;
                   var pos_y = $('#container_image').offset().top;

                   // LARGURA E ALTURA DO CONTAINER
                   var container_x = $('#container_image').width();
                   var container_y = $('#container_image').height();

                   // LARGURA E ALTURA DO CONTEUDO
                   var conteudo_x = $('#image').width();
                   var conteudo_y = $('#image').height();

                   // QUANTOS PX DO CONTEÚDO FICAM PRA FORA DO CONTAINER
                   var diferenca_x = conteudo_x - container_x;
                   var diferenca_y = conteudo_y - container_y;

                   // POSICAO INICIAL ( na metade da tela)
                   var metade_x = -parseInt(diferenca_x / 2);
                   var metade_y = -parseInt(diferenca_y / 2);

                   // POSICIONANDO CONTEUDO
                   $('#container_image').mousemove(function (e)
                   {
                       porcentagem_x = parseInt((e.pageX - pos_x) / container_x * 100);
                       porcentagem_y = parseInt((e.pageY - pos_y) / container_y * 100);
                       leftPosition = parseInt(0 - (diferenca_x / 100 * porcentagem_x));
                       topPosition = parseInt(0 - (diferenca_y / 100 * porcentagem_y));
                       $('#image').css({
                           'left': leftPosition,
                           'top': topPosition
                       });
                   });
                   $('#image').css({
                       'left': metade_x,
                       'top': 0
                   });
                   // MOSTRANDO A IMAGEM
                   $('#image').css('visibility', 'visible');
               }

           });
       });
   </script>
   <style type="text/css">
		div#container_image { float: left; margin-right: 5px; width:783px; height:488px; position: relative; overflow:hidden; z-index:1;  }
		div#container_image img#image { position: absolute; left:0; top:0; visibility: hidden; cursor:crosshair; }  
</style>
</head>
<body>
   <div style="width:800px">
       <div id="container_image">
           <img alt="" src="" id="image" />
       </div>
       <a href="#" title="fechar" rel="modalclose" class="fechar"><img src="imagens/closebox.png" /></a>
   </div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito