Como funciona esse plugin?
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...
/applications/core/interface/imageproxy/imageproxy.php?img=http://i51.tinypic.com/23jia00.jpg&key=82c07c4bbba3eccee71f1d10b54eebf3a3cc9814ea98d015c9b2625432ad06e3" alt="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>Discussão (2)
Carregando comentários...