Joomla Opera IE 문제에 대한 Jqzoom 구현

Question

Joomla 기반 웹 사이트에서 jQzoom 플러그인을 구현했습니다. 모든 브라우저에서 잘 작동하지만 IE와 Opera는 최신 버전입니다. 그것은 마우스 위치를 올바르게 얻지 못하는 것 같습니다. 내가 joomla 사이트가 아닌 곳에서 같은 레이아웃과 옵션을 테스트했지만, 모든 것이 잘되어서 정말 모릅니다. 다음은 Jqzoom을 사용하는 방법입니다. 왼쪽의 주 제품 이미지와 남은 추가 이미지는 모두 700px 컨테이너 안에있는 500px 컨테이너에 있으며 나머지 200px는 위치 : 고정 메뉴입니다.

<div id="targetDiv" style="float:left;min-width:350px;min-height:499px;max-width:350px;max-height:499px;margin-bottom:10px;margin-right:20px;"> 
<a href="" class="zoom"> 
<?php echo ps_product::image_tag($product_full_image, 'class="productImage" alt="'.$product_name.'" title="'.$product_name.'"', 0); ?> 
</a> 
</div> 
<div id="addimg" style="height:499px;width:45px;float:left;margin:0px;"> 
<?php echo $this->vmlistAdditionalImages($product_id, $images) ?> 
</div> 

이제 Jqzoom과 추가 이미지를 전환하는 스크립트를 호출합니다.

jQuery(document).ready(function($) { 
    $(document).ready(function() { 
     var url = $('.zoom img').attr('src'); 
     $('a.zoom').attr('href', url); 
     $('.zoom').jqzoom(); 
     $('#addimg a').wrap('<div class="addimg" />'); 
     $('img.productImage').attr({'width':'350', 'height':'499'}); 
    }); 
}); 

function showDiv(objectID,imgName) { 
    var theElementStyle = document.getElementById(objectID); 
    theElementStyle.innerHTML = "`<a class='zoom' href='"+imgName+"'><img src='"+imgName+"' border='0' width='350' height='499'></a>`"; 
    jQuery(document).ready(function($) { 
     $(document).ready(function() { 
      $('.zoom').jqzoom(); 
     }); 
    }); 
} 

오페라와 IE는 항상 내가 왼쪽으로 설정 한 경우에도 이미지의 오른쪽에 팝업 제대로 줌 팝업 상자가 표시되지 않습니다, 아래는하지만 작동합니다. 큰 이미지가 모든 공간을 차지하는 것처럼 보입니다. 나는 완전히 혼란스러워.

그 줌의 전체 아이디어는 img 을 사용하여 작은 이미지를로드하고 앵커로 확대/축소를 가리키는 것입니다. 내가 한 일은 Virtuemart에서 중간 크기의 이미지를로드 할 수있는 능력이 없다는 것입니다. 그 이유는 큰 이미지를로드하고 jQuery로 크기를 조정 한 다음 img의 src를 a href에 할당하는 것이고 그 방법입니다. 공장.

정확하게 스크립트를로드하지만 Opera와 IE에서는 마우스가 이미지를 떠난 후에도 스크립트가 계속 실행됩니다. 인쇄 화면 중 하나에서 볼 수 있으며 마우스 위치가 올바르게 표시되지 않습니다. 나는 그것이 이미지 크기 조정 때문에있을 거라고 생각했지만, 작은 이미지를로드하면 아무데도 나옵니다. 줌은 여전히 ​​이미지 바깥에서 작동하고 이미지 주위에 흰색 색상을 보여줍니다.

누구나 적어도 해결책을 제시 할 수 있기를 바랍니다. 지난 2 일 동안 인터넷 검색을했는데 같은 문제가있는 사람을 찾지 못했습니다. 이것은 상업적인 직업이 아니라, 내 자신의 프로젝트입니다 ... 희망 당신의 도움으로 해결책을 찾을 수 있습니다.

Answer 1

그거 알아? 나는 jqzoom을 고치는 아이디어를 포기하고 여기 jquery 줌을 작성하기로 결정했다. 그것은 모든 브라우저와 joomla 웹 사이트에서 완벽하게 작동한다. 나는 몇 시간 만에 썼고 더 많은 기능을 구현하려고 노력했기 때문에 누구나 필요하다면이 스크립트를 초보자 용으로 사용해도된다. 내가 한 것은 기본적으로 다음과 같습니다. 하나의 그림을 가지고 있는데, 큰 그림은 필요한 크기로 jquery로 크기를 조정합니다. 위치가 있습니다 : 전체 크기의 그림이 들어있는 절대 div. 평범하고 단순합니다. 더 어려운 것은 줌된 그림이 마우스가 가리키는 정확한 위치를 표시하는 것이 었습니다. 공식은 - (왼쪽/위쪽에서 줌 div + 마우스 좌표 * 2까지의 양) + 줌 div 폭의 절반 /신장. 확대 그림이 정확하게 작은 크기의 두 배이기 때문에 나는 마우스 좌표를 곱했습니다. 그러나 다른 차원에서도 효과가있는 것처럼 보입니다. 코드는 다음과 같습니다.

$(document).ready(function(){ 
var marginLeft = $('#pop img').offset().left; 
var marginTop = $('#pop img').offset().top; 
var windowHalf = $('#pop').width() /2; 
var windowHalfV = $('#pop').height() /2; 
$("#test").mousemove(function(e){ 
var x = (marginLeft - (e.pageX - this.offsetLeft) * 2)+windowHalf; 
var y = (marginTop -(e.pageY - this.offsetTop)*2)+ windowHalfV; 
var one = $('#pop img').offset(); 
    $('#log').html(x +', '+ y); 
    $('#log2').html(one.left+', '+ one.top); 
    $('#pop img').offset({top: y, left: x}); 

    }); 
    });